Nivo Slider Image Display Timing

Hi Folks!

I wanted to share some tips on changing the timing for the Nivo Slider Component. Our Gen10 products include the large Nivo Slider on the index / primary layouts, and ( if you have the Standard or Pro ) package you’ll also have the Nivo Slider Small included with the Secondary Layouts ( which is most of your pages ).

The default timing for the image ( title and descriptions ) to be displayed is 10 seconds. You can alter this as you need. All you need to do is edit the ‘pause’ setting in the Nivo Slider javascript file.


To Change the timing for the Nivo Slider used in your primary layouts ( default slider used on the ‘index.htm’ page ).

Step 1:

The first thing you’ll need to do, is remove the ‘nivo slider small’ component from your page ( index.htm ) or ( primary ) layout page, as the timing variable used for this component ( although turned OFF via CSS ) will still affect the Nivo Slider component if you plan on using different timings for your Nivo Slider ( primary ) and Nivo Slider Small ( secondary ) components.

[ … the reason we include both components in your page, is so you can quickly and easily change your page layout from primary to secondary and visa verse by simply changing the style sheet from primary.css to secondary.css and visa verse … ]

In a Microsoft web editor, open your page.

Switch to CODE view.

Scroll down the page and ‘locate’ your <div id=”nivo_slider_small”>, here’s a screenshot of what that would look like:

2-21-2014 9-38-32 AM

remove the highlighted code.

IF you are adjusting the timing for the ‘nivo slider small’ located in your secondary page layouts, you do not need to delete the <div id=”nivo_slider”> .. Bonus, less work.

Step 2:

Now, you can adjust the timing for your nivo slider or nivo slider small…

  1. open your “Site / javascript” (folder)
  2. open the “jquery.nivo.slider.js (file)
  3. open the “jquery.nivo.slider.small.js (file)
  4. scroll down to the VERY bottom of both files
  5. locate the //Default settings: for

    pauseTime: 10000,

  6. the 10000 is milliseconds, so in real world time that equals 10 seconds… so changing 10000 to 5000 would reduce the image display time to 5 seconds, and increasing to 15000 would change the actual display time to 15 seconds… based on this you should be able to do the math to figure out the timing in milliseconds that will work for you.