Enter here first to learn how to install nivoslider on your wordpress theme
After you have it installed on your header.php, you can access it from anywhere, as for example, in this same page you’re reading:
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect: ‘fade’, // 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: 1500, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3… navigation
controlNavThumbs: true, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: ‘Prev’, // Prev directionNav text
nextText: ‘Next’, // Next directionNav text
randomStart: false, // Start on a random slide
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
});
});
Be sure you include this html wherever you want you gallery slideshow to display:
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <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>
And after it, include the Script that will convert your images onto a nice gallery slideshow:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
When you refresh your page, you will see the gallery with the basic default effects. If you want to modify the effects or play with the customization, replace the SCRIPT for this one:
<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 controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide 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>
At this point, if are including your code and you don’t see your gallery or for some reason the gallery is not working, you PROBABLY have called jQuery library more than once, or you have MOTOOLS and JQUERY libraries all together mixed. So, go and be sure you call the jQuery library only once and no other .js call is messing with your nivoslider on your header.php
That’s it! Enjoy your new slider.
PD: From version 3.0, nivoslider is responsive, so it will look great with your responsive template, specially if you use bootstrap