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 ).
To Change the timing for the Nivo Slider used in your primary layouts ( default slider used on the ‘index.htm’ page ).
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:
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.
Now, you can adjust the timing for your nivo slider or nivo slider small…
- open the “jquery.nivo.slider.js (file)
- open the “jquery.nivo.slider.small.js (file)
- scroll down to the VERY bottom of both files
- locate the //Default settings: for
- 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.