jQuery slider plug-in (Nivo) with 4 demos

The Nivo slider plug-in

The Nivo is a jQuery slider that is quite popular in the market and an easy to use plug-in that you may deploy in your website freely.

The plug-in can be downloaded from the developer’s page at Github website which JS file size is only 30Kb. The downloaded package also contains a few CSS files that define the theme of slides. You may also customize those themes as per the taste or needs of your website.

In the following section, I will show you the live demos of using the jQuery Nivo slider along with the code and on the way, you may also see how to setup this slider into your website or blog.

A demo of sliding four images with different effects

In this slider demo, four images are sliding along with captions. The slides move automatically or you may use the arrows for moving to next and previous slide. Besides, you may also see the small circles at the center bottom if you want to move to a particular number of slide directly. Have a look by clicking the link or image below:

jquery slider

See online demo and code

The markup for this example:

 

The script:

 

You may see the dependency files included in the <head> and <body> sections in the demo page.

A demo of slideshow with thumbnails

If you want to display the small thumbnail of images in slide then you may use the controlNavThumbs option in the jQuery code. Just set its value as true:

controlNavThumbs: true

Besides, you have to provide thumbnail images in the markup section by using the data-thumb attribute in the <img> tag that also specifies the slide image.

See the following demo with the same set of images used in the slide as in above example. For the demo, the same images also act as thumbnails:

jquery slider thumbnail

See online demo and code

In a live website, you would want to use the smaller images as thumbnails with different names If located in the same directory). Also, you noticed, the small circles are disappeared in this demo.

The markup with data-thumb data attributes:

 

 

The script with the controlNavThumbs option:

 

 

A demo of using sliding effects in images

You may apply different sliding effects by using the data-transition data attribute. The slider plug-in offers a few options that you may use for sliding images including:

  • sliceUpDownLeft
  • sliceUpDownLeft
  • fade
  • sliceUpDown
  • sliceUpLeft
  • sliceDownLeft
  • sliceDown
  • boxRainGrow
  • boxRain
  • boxRainReverse
  • boxRainGrowReverse

See the following demo where I used four different effects in sliding images:

jquery slider effect

See online demo and code

The markup:

 

The same script is used as in above example with thumbnails. You may also set the effect in the jQuery code by using the effect option.

Other useful options in the slider

This awesome jQuery based plug-in has plenty of other options that you may set in the jQuery code. For example:

  • slices : 20 // This is for the sliced animation where you may set the number of slices of image.
  • animSpeed: 600 //Sets the speed of transition. The speed is in milliseconds.
  • pauseTime: 2500 // This option sets the delay or until the current slide is visible. This is also set in milliseconds.
  • startSlide: 3 //This sets the zero-based index slide that you want to start as web page loads.

The plug-in has many other options that you may explore or by reading the detailed documentation.

A demo with a few options set in jQuery code

In this demo, a few options are used for setting the animation speed, starting slide, number of slices for the slice effect which is the first slide. The box columns and rows are also set for the slide number two and four.  The animation speed is set as 1.5 seconds while slide will pause on mouse hover:

See online demo and code

The script:

 

 

The markup is the same as in above two examples.