How to Create your own jQuery Slider Plugin

Create your own jQuery plugin – slider

Today we will create own first jQuery plugins. As one of easy task – we will create own image slider (commonly – of any content, not just images). Our slider will switch between slides using the fade effect.

Firstly – you can download our package and check demo:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<div class="example">
    <h3><a href="#">My Slider example</a></h3>
    <ul id="my_slider">
      <li><img src="data_images/pic1.jpg" alt="" /></li>  
      <li><img src="data_images/pic2.jpg" alt="" /></li>  
      <li><img src="data_images/pic3.jpg" alt="" /></li>  
      <li><img src="data_images/pic4.jpg" alt="" /></li>  
      <li><img src="data_images/pic5.jpg" alt="" /></li>  
      <li><img src="data_images/pic6.jpg" alt="" /></li>  
      <li><img src="data_images/pic7.jpg" alt="" /></li>  
      <li><img src="data_images/pic8.jpg" alt="" /></li>  
      <li><img src="data_images/pic9.jpg" alt="" /></li>  
      <li><img src="data_images/pic10.jpg" alt="" /></li>  
    </ul>
    <div id="counter"></div>
</div>

As you can see – all very easy, here are UL-LI structure with slider tabs inside. In end – additional counter element.

Step 2. CSS

Here are used CSS file with styles of our demo:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*My slider styles*/
#my_slider {
    width:500px;
    height:340px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
}
#counter {
    text-align:right;
    font-size:16px;
    width:500px;
}

Step 3. JS

Here are all JS files:

js/main.js

(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var amount;
        var i;

        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            i++;
            if (i >= amount) i = 0;
            $(slides[i]).fadeIn(1000);

            // updating counter
            cnt.text(i+1+' / '+amount);

            // loop
            setTimeout(run, interval);
        }

        slides = $('#my_slider').children();
        cnt = $('#counter');
        amount = slides.length;
        i=0;

        // updating counter
        cnt.text(i+1+' / '+amount);

        setTimeout(run, interval);
    };
})(jQuery);

// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

Firstly, make attention to $.fn.MySlider, so it mean that I registering my function as new jQuery function (expanding its functions). Then I made simple switching mechanism between images. And, using fadeOut-fadeIn – perform ‘switching’. So, as result, we can call ‘MySlider’ function for any UL element which we want to use as slider. Example: $(‘.smart_gallery’).MySlider(3000); (where 3000 – delay between switching).

js/jquery-1.5.2.min.js

This is default jQuery library. Available in our package.

Live Demo

Conclusion

Today I told you how to build new own jQuery plugin. Sure that this will useful for you. Our sample result was very easy, and very small. The whole JS code can even be compressed to 284 bytes 🙂 Good luck!