how can i change nivo slider parameters while it's running?

Question

So i have a NivoSlider on my page. My problem is that i want the first slide only to show for 2 seconds, and all the other slides for 5 seconds (first one is only some text "Product version 2 is here"). How can i do this? i didn't find any (good) documentation at http://nivo.dev7studios.com/support/ .

here is what i tried:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:2000,
        pauseOnHover: false,
        controlNav:false,
        directionNav:true,
        directionNavHide:true,
        effect:'sliceDown',
        captionOpacity: 0.9,
        afterChange: function(){$('#slider').nivoSlider().defaults({pauseTime:5000})}       
    });
});
</script>

the last line here afterChange: function(){$('#slider').nivoSlider().defaults({pauseTime:5000})} is called, but the my attemp to change the initial settings fails - it only destroys the animations (flips from one slide to the next without anim) and does not change the pause time.

does anyone know how to change the pause/delay between the slides during runtime?

Solution 1

Thanks to Sinetheta, who pointed me into the right direction here:

$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:5000,
        pauseOnHover: false,
        controlNav:false,
        directionNav:true,
        directionNavHide:true,
        effect:'sliceDown',
        captionOpacity: 0.9,
        afterLoad: function(){
            setTimeout(function(){
                $('#slider').find('a.nivo-nextNav').click()
            },2000);        
        },
    });
});

Solution 2

I had this same problem as I had a page with 3 sliders on it, where we wanted 1 to change every 5 seconds, which meant while each one had a 15 second pauseTime, the second one needed a 5 second delay, and the 3rd needed a 10 second delay. I tried the above solutions and many others but couldn't get it to work with the mutliple sliders. I ended up fixing it by adding a new setting "recurPauseTime" and then adding the following to the nivo:animFinished function:

clearInterval(timer);
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.recurPauseTime);

This allowed me to set it up like:

slider1:

pauseTime: 5000,
recurPauseTime:15000 

slider2:

pauseTime: 10000,
recurPauseTime:15000 

slider3:

pauseTime: 15000,
recurPauseTime:15000 

Solution 3

Ok, I've found a really inelegant solution. I had to add a afterChange: function() below the afterLoad: function() to set the transition for all subsequent slides. Anyone have a better idea?

Here's my whole $(window).load(function():

    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'fade', 
            animSpeed: 3000, // Slide transition speed
            pauseTime: 7000, // How long each slide will show   
            pauseOnHover: false, // Stop animation while hovering
              /* directionNav and directionNavHide added so that 
                afterLoad: function below can find 'Next' link */
            directionNav: true, // Hide Next & Prev navigation
            directionNavHide: true, // Only show on hover
              /* prevText and nextText set to nothing so they don't show */
            prevText: '', // Prev directionNav text
            nextText: '', // Next directionNav text
            controlNav: false, // Hide 1,2,3... navigation
            randomStart: true, // Start on a random slide
              /* Below changes first slide display time */
            afterLoad: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            },      
              /* Code above changes first slide duisplay time, but then second 
              slide display time is too long. Below code sets display time for 
              all subsequent slides. */
            afterChange: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            }
        });
    });

Thanks,

Jerri

Solution 4

Although technically you "could" change the pauseTime while Nivo is running, it would be much more difficult than it would appear, as they have not provided native support for this kind of operation.

A more intuitive approach might be to check on each new slide whether you are on the desired fast-slide. If so, wait 2 seconds and advance the slide.

Nivo options:

afterLoad: slideCheck(),
afterChange: slideCheck()

global function

function slideCheck(){
    if( $('#slider .nivo-control').eq(0).hasClass('active') ){
        setTimeout(function(){
            $('#slider').find('a.nivo-nextNav').click()
        },2000);
    }
} 

edit: It turns out that nivo's slideChange callback is not fired on the very first slide. So we need to hook in twice.

Solution 5

You probably solved your problem by now but I had the same question. After looking into all options I came up with a easy, I don't say beautiful, solution. Because the slideshow i'm using uses the 'fade' effect, no navigation (keyboard, pause, directioncontrol etc) my solution was to place the first image twice in the html. This way the first image is shows twice as long as the rest of the images without any visible signs the image is actually loaded twice.

Again, not a sexy solution but nice enough to work.

View more solutions