in ,

Make Responsive Slider with Touch Support using wmuSlider jQuery Plugin

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

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 with responsive slider and touch support for 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.

Make Responsive Slider with Touch Support using wmuSlider jQuery Plugin

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}

[snax_content]

Written by Julian Anderson

Smashfreakz delivers Useful and Informative article about Design, Web Resource, WordPress, Top List, Infographic, Inspiration, Photography and Many more. Our Goals is make Inspirations to all people.

Leave a Reply

GIPHY App Key not set. Please check settings

Beauty and Fashion Photography by Joanna Kustra

Beauty and Fashion Photography by Joanna Kustra

Facebook Ads Vs Google Display Network [Infographic]

Facebook Ads Vs Google Display Network [Infographic]