Nivo Slider Delay only the first image

Question

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

Based on this thread: Pause Nivo Slider

I was able to figure make it stop on the first image.

Here's my code. I'm stopping the animation twice because I want it to also stop after slideshow 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'm using the NIVO slider plugin and while I got it to work smoothly, I need the first image to last longer than the rest (First image has text in it).

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

that should make it a lot easier to understand the issue. I'm still attaching html code from fiddle before for reference:

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
});

Answer 1

I have not tried this, so I cannot guarantee that it will work, but one of the things that you could try is actually setting the pauseTime to a function instead of a constant, 5000. You would determine what image you are on, then, if it is the desired image, you would set the time to something like 8000, otherwise you would set it to 5000.

Just to reiterate: I have NOT tested this, nor can I guarantee that it will work. However, if it does, it would provide you with a significant amount of extra flexibility.

Here is the code that you would use if you wanted to try to implement this:

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

Alternatively, if this doesn't work in the pauseTime, then I would try putting nearly the same thing into othe beforeChange option, like so:

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

IMPORTANT NOTE: You should actually replace the ....currentSlide == 0) in the samples above with the accessor for the Nivo Slider's startSlide option, especially if you ever plan to change the start index of the slider. I do not remember what the accessor is, but I would imaging that it would look something like:

....currentSlide == settings.startSlide)

where settings is the name of the settings variable that Nivo uses.

UPDATE

Based on the errors you mentioned in your comments, my next suggestion is that you try the same two solutions again, but this time replace the setting.startSlide with 0. If that does not work (though it should), then we need to go back to the drawing board. If it does work, try replacing the 0 with this.startSlide. Let me know how this works out.