Fork me on GitHub


By. Lucas Forchino.


  1. Add jQuery library to your page and base files: jquery.cleanSlider.js and cleanSlider.css
  2. Add Html list with images
  3. Call cleanSlider jQuery method with config parameters.

1 - The files inclusion

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

2 - The HTML Code

The html code is pretty simple, just add a ul-li list with links and images inside. Links allow you to link the images to internal or external pages. You can specify a caption label for the image using the title property

                    <div class="slider">
                            <li><a href=""><img title="" src="img/img1.jpg" /></a></li>
                            <li><a href=""><img title="" src="img/img2.jpg" /></a></li>
                            <li><a href=""><img title="" src="img/img3.jpg" /></a></li>
                            <li><a href=""><img title="" src="img/img4.jpg" /></a></li>
                            <li><a href=""><img title="" src="img/img5.jpg" /></a></li>

3 - The Javascript Code

                        var config={};
                        config.width =550;  //slider width size in pixels 
                        config.height=350;  //slider height size in pixels 
                        config.intervalTime  =7000; //mili-seconds between slides   

About CleanSlider

CleanSlider is a jQuery slideshow plugin that provide you an easy and clean way to display images on your website. It was tested in all major browsers and packaged into a small, clean and efficient plugin.


Supported Browsers:

More ?

Check my others plugins on jQuery Load