{"id":3112,"date":"2016-12-16T09:41:19","date_gmt":"2016-12-16T09:41:19","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=3112"},"modified":"2023-10-06T10:20:48","modified_gmt":"2023-10-06T10:20:48","slug":"jquery-slider-plug-in-nivo-with-4-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/jquery-slider-plug-in-nivo-with-4-demos\/","title":{"rendered":"jQuery Nivo Slider Plug-in with 4 Demos"},"content":{"rendered":"

The Nivo slider plug-in<\/strong><\/h3>\n

The Nivo is a jQuery slider<\/a> that is quite popular in the\u00a0market and an easy to use plug-in that you may deploy in your website freely.<\/p>\n

The plug-in can be downloaded from the developer\u2019s page<\/a> 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.<\/p>\n

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.<\/p>\n

A demo of sliding four images with different effects<\/strong><\/h3>\n

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\u00a0center bottom if you want to move to a particular number of slide directly. Have a look by clicking the link or image below:<\/p>\n

\"jquery<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

The markup for this example:<\/strong><\/p>\n

\u00a0\u00a0\u00a0 <div id=\"wrapper\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"slider-wrapper theme-default\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"jquery-slider-demo\" class=\"nivoSlider\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/toystory.jpg\" alt=\"The slide 1\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"#\"><img src=\"images\/up.jpg\" alt=\"The slide 2\" title=\"The caption comes here\" \/><\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/walle.jpg\" alt=\"The slide 3\" data-transition=\"slideInLeft\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/nemo.jpg\"\u00a0 alt=\"The slide 4\" title=\"#htmlcaption\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"htmlcaption\" class=\"nivo-html-caption\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>And you may use\u00a0 <\/strong> <em>HTML<\/em> captions with <a href=\"#\">links<\/a>.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 <\/div><\/pre>\n
The script:<\/strong><\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(window).load(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#jquery-slider-demo').nivoSlider();\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
You may see the dependency files included in the <head> and <body> sections on the demo page.<\/p>\n
A demo of slideshow with thumbnails<\/strong><\/h3>\n
If you want to display the small thumbnail of images in slide then you may use the controlNavThumbs<\/strong> <\/em>option in the jQuery code. Just set its value as true:<\/p>\n
controlNavThumbs: true<\/p><\/blockquote>\n
Besides, you have to provide thumbnail images in the markup section by using the data-thumb<\/strong><\/em> attribute in the <img> tag that also specifies the slide image.<\/p>\n
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:<\/p>\n
\"jquery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
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.<\/p>\n
The markup with data-thumb data attributes:<\/strong><\/p>\n
\u00a0\u00a0 <div id=\"wrapper\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"slider-wrapper theme-default\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"jquery-slider-demo\" class=\"nivoSlider\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/toystory.jpg\" data-thumb=\"images\/toystory.jpg\" alt=\"The slide 1\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"#\"><img src=\"images\/up.jpg\" data-thumb=\"images\/up.jpg\" alt=\"The slide 2\" title=\"The caption comes here\" \/><\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/walle.jpg\" data-thumb=\"images\/walle.jpg\" alt=\"The slide 3\" data-transition=\"slideInLeft\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/nemo.jpg\" data-thumb=\"images\/nemo.jpg\" alt=\"The slide 4\" title=\"#htmlcaption\" \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"htmlcaption\" class=\"nivo-html-caption\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>And you may use\u00a0 <\/strong> <em>HTML<\/em> captions with <a href=\"#\">links<\/a>.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 <\/div><\/pre>\n
The script with the\u00a0controlNavThumbs option:<\/strong><\/p>\n
\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(window).load(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#jquery-slider-demo').nivoSlider({\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 controlNavThumbs: true\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo of using sliding effects in images<\/strong><\/h3>\n
You may apply different sliding effects by using the data-transition<\/em> data attribute. The slider plug-in offers a few options that you may use for sliding images including:<\/p>\n