The most beautiful and easy to use image slider in Jquery – Nivo Slider

image-slider

If you are looking for a awesome image slider for your website then in this post I am going to introduce most beautiful and easy to use image slider – Nivo Slider, As you know image slider makes your website more dynamic, cool and attractive. Using slider you can easily display your multiple services, products and portfolio and slider helps to display more stuff in single page.
image-slider
Nivo Slider – The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. There is literally no better way to make your website look totally stunning.

Let’s Integration of Nivo Slider

CSS + JS Libraries

Include required plugin libraries including jquery core library on page, Nivo Slider provide multiple themes as you can include any theme css on page and match slider with your website theme.


<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
<script type="text/javascript" src="jquery.nivo.slider.js">script>

HTML

Here i have created sample html and included 4 images for slider and set theme class as default you can choose any given theme and class as per your website look and feel.

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> 
<img src="http://placeimg.com/1200/440/people" data-thumb="http://placeimg.com/1200/440/people" alt="" title="Example Caption -1" /> 
<img src="http://placeimg.com/1200/440/animal" alt="" title="Example Caption -2"  />
<img src="http://placeimg.com/1200/440/sport" alt="" data-transition="slideInLeft" title="Example Caption -3" /> 
<img src="http://placeimg.com/1200/440/nature" alt="" title="Example Caption -4" /> 
div>
div>

JAVASCRIPT

Finally add Nivo Slider jquery function on page and make your image slider actionable. Following is the very basic Nivo Slider function.

<script>
    $(function() {  
      $('#slider').nivoSlider();  
    });
script>

You can pass more properties on nivoSlider() as per your need here is the list of properties you can pass.

$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false
});

Nivo Slider also provides event handler action you can perform any action after following event.

$('#slider').nivoSlider({
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});

See online Demo and Download Source Code.

See official document for more detailed Nivo Slider properties and functions

Leave a Reply

Your email address will not be published. Required fields are marked *

Top