Custom Widget #2 - Nivo Slider

This custom widget does not apply to all themes. Check your theme's description first, to make sure it's included.

 

To add the Nivo slider to one of your pages you will 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.

<div id="slider" class="nivoSlider">
  <img src="images/slide.1.jpg" alt="" />
  <a href="http://bindtuning.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">
  <h3>Any HTML can be used here</h3>
  <h6>Sample caption</h6>
</div>

Adjust values, image paths and texts as necessary.

If you need the banner to have no space at the bottom, remove class widget.
In  DNN, also check that "Display Container?" is not selected.

 

Furthermore, the Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults.
This code is located in your theme's .ascx files, at the bottom, and can be adjusted as needed. 

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

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

More information on Nivo slider usage can be found at: http://nivo.dev7studios.com/support/jquery-plugin-usage/

Have more questions? Submit a request

Comments

  • Avatar
    Brian McNair

    Hi pedro

    I removed "<script type="text/javascript" src="/nivo/scripts/jquery-1.9.0.min.js"></script>"

    Doesn't appear to have made any difference, I assume it was only that reference and not the entire piece of code?

    has it reduced the errors?

  • Avatar
    jodi pliszka

    HELP PLEASE! I wanted to swap out an image and I messed up the slider bar. Can you tell me what I did wrong. I put things back the way they were, but the slider bar is small and then the second slide and 3 and 4 are an entire page. HELP PLEASE!

    --------------------------------------------------------------------------------










  • Avatar
    Carlos Silva

    Hi Jodi,

    Please be sure that your HTML structure for the slider matches the code bellow:

    <div class="TWSlider-wrapper theme-default">
        <div class="nivoSlider">
            <div id="TWSlider" class="TWSlider nivoSlider"> 
            <img alt="" src="demoimages/Slide1.jpg" data-thumb="demoimages/Slide1.jpg" title="#htmlcaption1" /> 
            <img alt="" src="demoimages/Slide2.jpg" data-thumb="demoimages/Slide2.jpg" title="#htmlcaption2" /> 
            <img alt="" src="demoimages/Slide3.jpg" data-thumb="demoimages/Slide3.jpg" title="#htmlcaption3" />
        </div>
        <div id="htmlcaption1" class="nivo-html-caption">
            <h2>Slide 1</h2>
            <p>Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame.</p>
        </div>
        <div id="htmlcaption2" class="nivo-html-caption">
            <h2>Slide 2</h2>
            <p>Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame.</p>
        </div>
        <div id="htmlcaption3" class="nivo-html-caption">
            <h2>Slide 3</h2>
            <p>Donec scelerisque aliquet mi, non venenatis urnas iaculis. Utea id nila ante. Cras est massa, interdum ateal imperdiet etean, gravida eu quame.</p>
        </div>
    </div>
     
    Thank you,
    Carlos
     
    Edited by Carlos Silva
BindTuning logo
Copyright Ⓒ 2021 Bind.
All rights reserved.
Privacy Policy
Cookie Policy
BindTuning
              Linkedin BindTuning Twitter BindTuning YouTube BindTuning Instagram BindTuning
              Facebook
Powered by Zendesk