jQuery Nivo Slider Plugin

Download Total: 411

Nivo Slider is a javascript library that allows creating slide show in website. Nivo Slider allows you to convert slides with many different effects. You can also click the arrow on pre and next to move slides. You can also view any slide with buttons below the slide show.

Features:

Many slide transition effects
Browse slides with next and pre button
Open any slide with buttons
Fully responsive and works great on every device (Desktop, Tablet, Mobile)
Diplay description information for images

Live Demo

This is an example of a HTML caption with a link.

How to Use

Add the css below to your html page

<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/themes/default/default.css"
    type="text/css" media="screen" />
<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/themes/light/light.css"
    type="text/css" media="screen" />
<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/themes/dark/dark.css"
    type="text/css" media="screen" />
<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/themes/bar/bar.css"
    type="text/css" media="screen" />
<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/css/nivo-slider.css"
    type="text/css" media="screen" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/css/style.css"
    type="text/css" media="screen" />

Create a container where you want to render slider

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/toystory.jpg"
                data-thumb="images/toystory.jpg" alt="" />
            <a href="#"><img
                    src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/up.jpg"
                    data-thumb="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/up.jpg"
                    alt="" title="This is an example of a caption" /></a>
            <img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/walle.jpg"
                data-thumb="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/walle.jpg"
                alt="" data-transition="slideInLeft" />
            <img src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/nemo.jpg"
                data-thumb="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/images/nemo.jpg"
                alt="" title="#htmlcaption" />
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
    </div>
</div>

Load jQuery library together with the jQuery Nivo Slider library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-nivo-slider/js/jquery.nivo.slider.js">
</script>
<script>
    $(function () {
        $('#slider').nivoSlider();
    });
</script>