Facebook Twitter Youtube
back to all

Create a new slider on your WordPress Theme

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:

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

$(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

Related Articles