Best JQuery Image Slider with Transition Effects

Nivo Slider is a lightweight (7kb compressed) jQuery plugin for creating good-looking image sliders with 9 unique transition effects.

Your Ad Here

Nivo Slider is a lightweight (7kb compressed) jQuery plugin for creating good-looking image sliders with 9 unique transition effects.

To use the Nivo Slider you have to include jQuery, the Nivo Slider script and the Nivo Slider CSS on your page. The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:

Nivo

Slider Setup and Options

Your Ad Here

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
           effect:'random',
           slices:15,
           animSpeed:500,
           pauseTime:3000,
           startSlide:0, //Set starting Slide (0 index)
           directionNav:true, //Next & Prev
           directionNavHide:true, //Only show on hover
           controlNav:true, //1,2,3...
           controlNavThumbs:false, //Use thumbnails for Control Nav
           controlNavThumbsSearch: '.jpg', //Replace this with...
           controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
           keyboardNav:true, //Use left & right arrows
           pauseOnHover:true, //Stop animation while hovering
           manualAdvance:false, //Force manual transitions
           captionOpacity:0.8, //Universal caption opacity
           beforeChange: function(){},
           afterChange: function(){},
           slideshowEnd: function(){} //Triggers after all slides have been shown
       });
   });
  </script>

Live Demo Download

9 Responses to "Best JQuery Image Slider with Transition Effects"

  1. comment by Rashad Allgaeuer

    I really like assembling useful information , this post has got me even more info! .

Leave a Reply

Submit