" Our sales have increased dramatically with the new ecommerce website you developed for us. "
Popular Posts:
16
Apr
This little tip will actually solve these issues people have with Nivo Slider:
- Nivo Slider doesnt load images on the fly, it pre loads every image in the slideshow. If you have a fair few images you will notice “lag” or a wait until the slideshow starts, leaving you looking at the loading gif (round and round and round…)! The tip doesnt solve this issue per say but does offer a cool alternative to the loading gif. Also if you are using the WordPress plugin and are not using a slider theme then you have no loading image anyway and the slides jump about as they are loaded (this was actually the reason I investigated as it was bugging me).
- Sometimes you will notice the images stacked in an ugly way before the Javascript kicks in to sort it all out. Normally solved by using overflow:hidden but this comes with its own dangers; like losing your nav arrows.
Right well lets get to the tip, tis very simple and is just a simple CSS tweak; add this to your CSS file:
.nivoSlider img:not(:first-child) { display:none; } /* this was for the WP plugin version */
Or something like this when installed on its own:
#slider img:not(:first-child) { display:none; } /* this is for standard nivo installs */
Obviously if you have customised the parent div in any way then change it to what you have used. Overall a good tip I reckon.
“Or something like this when installed on its own:
#slider img:not(:first-child) { display:none; } /* this is for standard nivo installs */”
what file does this go on? I have the files “jquery.nivo.slider.js” and a “nivo.slider.css” in my wordpress install, it is installed into a theme, so I can’t just edit the plugin.
Thank you!
Hi Rulexo, actually you can edit any plugin file through the WordPress dashboard. However you should put the CSS mentioned in your themes CSS file so it isnt overwritten by plugin updates. If you are using a free or bought theme then any updates to it would overwrite your changes in the CSS file so something to be aware of.
Thanks, worked great on my website!
Finally those irritating loading/jumping images are gone