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
How to Use
1. CSS
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" />
2. HTML
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>
3. Javascript
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>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.