Make Responsive Slider with Touch Support using wmuSlider jQuery Plugin

jQuery is one of the most popular and powerful javascript libraries for creating dynamic and interactive effects for websites. It is greatly simplifies JavaScript programming that easy to learn.

Jquery can be use for make auto checking forms, photo galleries, browser-based games and other dynamic and interactive website effects.

In this post we will learn how to make AJAX image gallery with responsive slider and touch support for mobile device using wmuSlider jquery plugin.

wmuSlider is awasome jquery responsive image slider by Brice Lechatellier. This code can used for the responsive slider on the homepage and come with under the MIT license.

Demo | Download

1. Calling the library

{code type=codetype}

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”jquery.wmuSlider.min.js”></script>

{/code}

2. Initialisation

{code type=codetype}

<div class=”wmuSlider”>
<div class=”wmuSliderWrapper”>
<article>
<img width=”612″ height=”612″ src=”http://farm6.static.flickr.com/5295/5476032712_6441c7e316_z.jpg” />
</article>
<article>
<img width=”612″ height=”612″ src=”http://farm6.static.flickr.com/5176/5456963815_042d9c3ea0_z.jpg” />
</article>
<article>
<img width=”612″ height=”612″ src=”http://farm6.static.flickr.com/5201/5296457034_5688b25c15_z.jpg” />
</article>
<article>
<img width=”612″ height=”612″ src=”http://farm6.static.flickr.com/5245/5291874922_35ca47cc3d_z.jpg” />
</article>
</div>
</div>
<script>$(‘.wmuSlider').wmuSlider();</script

{/code}

If you are using Modernizr, you can enable automatic touch support by setting the touch parameter.

{code type=codetype}

$(‘.wmuSlider').wmuSlider({
touch: Modernizr.touch
});

{/code}

3. Options

{code type=codetype}

animation: 'fade',
animationDuration: 600,
slideshow: true,
slideshowSpeed: 7000,
slideToStart: 0,
navigationControl: true,
paginationControl: true,
previousText: 'Previous',
nextText: 'Next',
touch: false,
slide: 'article',
items: 1

{/code}