Published: August 1st, 2012  By: Pascal  

Nivo Slider: Custom pause time for each slide

Setting up the Nivo Slider is really easy and it quickly provides an often impressive rendering of our slides
on a website. However, a feature I always wanted to see and use is the capability to choose  different
pause times per picture as this slider is really worth such kind of thing.
In the meantime, I wished to set up a basic and user friendly trick to keep things simple and don't fear
people who don't want to dig code and other stuff...

So, here's a way to set different pause times depending on the slide and this only requires a copy/paste of
some HTML code in the appropriate section.

So enjoy, and tell me if things can be improved or anything you would like to clarify about this new tip!


A first step: the lines to add in the <head> section
HTML Load Nivo Trick
In details...

• The above code is for a 5 Sec - 1 Sec - 1 Sec - 2,5 Sec sequence (4 slides), we set in the
slideTimes array:




• If you need to stop the slider on the last slide, use a pause time of 0 like in this example:
HTML Load Nivo Trick
HTML Load Nivo Trick
• If you need to assign a very short pause time on one of several slides, use a pause time of 10 like in
this example for slides 2,3 and 4:
HTML Load Nivo Trick
• The next lines are only hiding the direction buttons in case the pause time is below two seconds.
This can be relevant in most cases but if you want to let the arrows always visible, simply download and
use this simpler code version.
HTML Load Nivo Trick
Note: In these examples, Slider is the ID of the slideshow, don't forget to change it if needed.


The second (and last) step: the lines to change in the Nivo Slider's initializing section

Simply add the afterLoad and afterChange functions
> download code
HTML Load Nivo Trick
In details...

• When the slider starts (afterLoad), it is switched to stop mode in order to manage differently the
pause time that will be applied (Nivo Slider's pauseTime option is NOT used anymore).

• Then we need to assign the first pause time, this process will also be started each time a new slide is
displayed (afterChange).

Of course, if you need more details, you can post a comment, I'll be glad to answer you...
> download code
• Other download
> demo CSS file
Thanks for reading and hope this helped!
Fin article
Steve
April 27, 2013
Thanks for all your great Nivo Slider tutorials and information! A great public service. Anyhow, I used your information to vary my slide times, but my slider will no longer pause on hover even when I set PauseOnHover back to "true." Is there any way I can pause the slide show with custom slide timings?

Thanks!

Pascal Gautier
Reply:
April 27, 2013
Hi Steve,

Thanks for your kind words.

Yes, this function is disabled...but I will give you a workaround to make it 'alive' again ;)
I'm very busy at the time being, just keep posted, I will be back.

Cheers!
Steve
April 27, 2013
Thanks Pascal, I'll keep checking!

Pascal Gautier
Reply:
April 30, 2013
Hi Steve,

Thanks for your patience.

Here's a script that should work:

var sTimer, stopOnHover;
jQuery('.nivoSlider').live('mouseover', function() {stopOnHover=1;clearInterval(sTimer);});
jQuery('.nivoSlider').live('mouseout', function() {stopOnHover=0;pauseSlides ();});

function pauseSlides () {

var slideTimes=[4000,2000,3000,2000];
var slideNo=jQuery('.nivoSlider').data('nivo:vars').currentSlide;

if ((slideTimes[slideNo]==0) || (stopOnHover==1)) return
clearInterval(sTimer);
sTimer=setInterval(function() {
 jQuery('.nivoSlider .nivo-nextNav').trigger('click');
}, slideTimes[slideNo]);
};

Cheers!
Steve
May 2, 2013
Thanks Pascal! Unfortunately I could not get it to work... The delays still works but the slides still did not pause. I tried to troubleshoot a bit but could not get it working. Do you have any hints on how I might go about debugging to get it working in my situation?

Thanks!
Steve
May 3, 2013
THANK YOU, THANK YOU, THANK YOU!

Hi again, we corresponded via email and Pascal very kindly troubleshot one last problem I had with the code: in my case there was a problem with the jQuery syntax. He switched to the $ syntax and moved the script into the body section and now it works perfectly! I really don't understand the details, but here is the working code:

var sTimer, stopOnHover;
$('.nivoSlider').on('mouseover', function() {stopOnHover=1;clearInterval(sTimer);});
$('.nivoSlider').on('mouseout', function() {stopOnHover=0;pauseSlides ();});
function pauseSlides () {
var slideTimes=[6000, 2500, 2500, 5500];
var slideNo=$('#slider').data('nivo:vars').currentSlide;
if (stopOnHover==1) return
clearInterval(sTimer);
sTimer=setInterval(function() {$('#slider .nivo-nextNav').trigger('click');},slideTimes[slideNo]);
};

Thank you so much. I never would have solved that in a million years!

Pascal Gautier
Reply:
May 5, 2013
Hi Steve!

My pleasure ;)

Cheers!
Steve
July 25, 2013
Thank you Steve. I am the web developer of the following company website, http://www.singersl.com/ . I wanted to have the nivo slider with custom timing and with pauseOnHover. Your code helped me. Thanks and God bless you.

Marv
November 23, 2013
Thank u. I'm not a programmer I wish there was a more menu driven approach. Having a title slide maybe with a varied length of time might be helpful. So you have one time for all transitions and when you select type title you could indicate the time for all titles.

I'd love to know if users of sliders agree with me that there is a big need fir variable times for a title to be on the creen versus a regular picture slide?

Pascal Gautier
Reply:
November 23, 2013
This may be possible, it just requires a different coding approach.

By the way, did you see the timelined captions tutorial?


Cheers!
Srikanth Kondapally
November 19, 2014
Hello there,

This was a very nice post, however in my current working case, we don't have previous and next buttons, so this particular line of code will not work

sTimer = setInterval(function () {
$j('.nivoSlider .nivo-nextNav').trigger('click');
}, slideTimes[slideNo]);

Can you explain me what would be the best approach if I have ControlNavigation enabled which will have the following output

[code]
Pascal Gautier
Reply:
November 22, 2014
Hi Srikanth,

Don't need to have the arrows visible to make the script work.

Cheers