Printable Version Printable Version Recommend Recommend Email to a friend Email to a friend

Use Nivo Slider to create your Image Slider on DotNetNuke - Part 4/5

4 min : 59 sec

This video series will show you how to create a nice image slider on DotNetNuke using a free JQuery plugin called Nivo Slider. This is part 4 of 5. It may look like too many parts, but the process to setup this slider is quite simple.

Load Function Parameters:

  • effect:'fade', // Specify the transition effect - It can be any effect listed below*
  • animSpeed:500, // Slide transition speed in miliseconds
  • pauseTime:3000, // How long each slide will show in miliseconds
  • startSlide:0, // Set starting Slide (Starts with a "0" - ZERO)
  • directionNav:true, // Next & Prev navigation - It can be set to true or false
  • directionNavHide:true, // Only show on hover - It can be set to true or false
  • controlNav:true, // Show navigation - It can be set to true or false
  • controlNavThumbs:false, // Use thumbnails for Control Nav - It can be set to true or false
  • controlNavThumbsFromRel:false, // Use image rel parameter for thumbs - It can be set to true or false
  • controlNavThumbsSearch: '.jpg', // Replace this with...
  • controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
  • keyboardNav:true, // Use left & right arrows - It can be set to true or false
  • pauseOnHover:false, // Stop animation while hovering - It can be set to true or false
  • manualAdvance:false, // Force manual transitions - It can be set to true or false
  • captionOpacity:0.8, // Universal caption opacity
  • prevText: 'Prev', // Prev directionNav text
  • nextText: 'Next', // Next directionNav text

*Effects:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Related Links:

- Nivo Slider Download

- DNN Module that uses Nivo Slider

- The code from this video


Do you have a question? Ask on our Forum!

Try FREE
30 days money back guaranteed