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

6 min : 36 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 1 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