Geek asks and answers

Nivo Slider Delay only the first image

IT WORKS!!! http://jsfiddle.net/jupago/W6CkP/

Based on this topic: Pause Nivo Slider

I managed to show that he stops at the first image.

Here is my code. I stop the animation twice because I want it to stop also after the slide show ends:

$(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 5000,
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true,  // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: false, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'previous', // Prev directionNav text
    nextText: 'next', // Next directionNav text
    randomStart: false, // Start on a random slide
    slideshowEnd: function(){           
          $('#slider').data('nivoslider').stop();
    setTimeout("$('#slider').data('nivoslider').start()",10000);
        }, // Triggers when last slide is shown
    });

    $('#slider').data('nivoslider').stop();
    setTimeout("$('#slider').data('nivoslider').start()",10000);
 });

Original post here:

I use the NIVO slider plugin, and while I got it to work smoothly, I need the first image to last longer than the others (the first image has text in it).

I created a working fiddle here: jsfiddle.net/jupago/W6CkP

which should greatly facilitate the understanding of the problem. I am still attaching html code from fiddle to link:

HTML:

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
<img src="http://goo.gl/I4c65" />
<img src="http://goo.gl/acxBF"/>
<img src="http://goo.gl/GBzYF"/>
<img src="http://goo.gl/BC2EA" />
<img src="http://goo.gl/9Sd69" />
<img src="http://goo.gl/qOaZl"/>
<img src="http://goo.gl/btswq" />
    </div>
</div>

JS NIVO:

    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 5000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true,  // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: false, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'next', // Prev directionNav text
    nextText: 'previous;', // 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
});
+5
3

, , , , , pauseTime , 5000. , , , , - 8000, 5000.

: , , . , , .


, , :

...
pauseTime: function() {
    if ($("#slider").data("nivo:vars").currentSlide == 0) {
        return 8000;
    }
    return 5000;
},
...

, pauseTime, beforeChange, :

...
beforeChange: function() {
    if ($("#slider").data("nivo:vars").currentSlide == 0) {
        $("#slider").delay(3000);
    }
    return;
},
...

: ....currentSlide == 0) NIVO Slider startSlide, - , , , , :

....currentSlide == settings.startSlide)

settings - , Nivo.


UPDATE

, , , , setting.startSlide 0. ( ), . , 0 this.startSlide. , .

+1

- :

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            $('#slider').data('nivoslider').stop();
            setTimeout(function(){
                 waited = true;
                 $('#slider').data('nivoslider').start();
            }, 2000); //2 seconds
        } else {
            waited = false;
        }
    },
    //...
    });
});

: , , , return false .

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            return false;
        } else {
            waited = false;
        }
    },
    //...
    });
});
0

I did this and worked great:

On your HTML page page:

$(window).load(function() {  
     $('#slider').nivoSlider({...


$( document ).ready(function() {
    $('#slider').nivoSlider({...
0
source

More articles:


All Articles