6th September 2011

wmuSlider, a jQuery responsive slider

#Blog#Code & Design

I want to give back to the community by sharing the code used for the responsive slider on the homepage.

Please keep in mind that it's still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED "AS IS"!

You can download the code and check out the demo on GitHub.

1. Calling the library

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

2. Initialisation

<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>

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

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

3. Options

The slider can be customised with the options bellow, it should be pretty self-explanatory.

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