The Nivo Slider is a free, open source image slider / banner rotator for your HTML based sites. It’s built in jQuery just to make sure everyone can see your page, including people with Apple Devices. It loads really fast even on a low bandwidth connection, works like a charm on iPhones, and Androids, and iPads ( tested by myself )
You can download this slider from here. Absolutely free!
What you need
To use the Nivo Slider you have to include the following in your page:
- jQuery
- Nivo Slider script
- Nivo Slider CSS
You also need to add some body HTML. This is ususally just a <div> with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.
Using the Slider.
<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Then somewhere in the <body> section -->
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</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>
To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.
Then it helps to add some CSS to make the slider look good while it’s loading:
#slider {
position:relative;
width:618px; /* Change this to your images width */
height:246px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
Finally you need to hook up your script using the $(window).load() function:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Customizing the slider
The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', // Specify sets like: 'fold,fade,sliceDown'
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Special Animation parameters
The effect parameter can be any of the following:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
That’s about it! I hope you find this post useful, and feel free to use this slider for botch personal and commercial projects! 
Feel free to download it from here:
Saw this gallery?
Thanks for the tip! I will review it soon!
Hi Paul,
I have a problem with this slider, it works fine in IE, Firefox, Opera except with Google Chrome. The problem is that when the slider first load, it suddenly stop the transition after the second images. I need to refresh the page once in order to work again and go along with all images.
Hope you can help me with this problem.
Thanks ahead,
Hello Jab,
Thanks for reading my blog and asking a question! So glad to get audience.
Please try to validate your design using W3C Validator ( Google W3C Validator )
I fixed most problems with it when I first used it by validating my code to the line. Please let me know if you fixed the issue.
Best regards,
Paul.
Hi Paul,
Thank you for providing Minimali-so on themeforest, I have purchased it and am very happy with the documentation provided as well as the nivo slider that is apart of the theme. I have been able to customize the slider however I am having trouble removing numbers that appear over the bullets. Although I have tried to adjust the css the numbers still appear. You can see this on the site; http://www.mentallyfitness.com
Hope you could point me in the right direction to solve this problem.
Thank you for your time.
I’m sorry. This is not the support board for Minimaliso. For support please go to ThemeForest so I can verify your purchase!
Hi,
You have mention that “That’s about it! I hope you find this post useful, and feel free to use this slider for botch personal and commercial projects! ” we can use this for commercial project. So can I use this slider for the premium theme. I am making one premium theme I want to use a slider I am not getting which to use. Let me know can I use this slider of Premium theme.
Check out nivoslider.com for more details on their license. I believe it recently changed!