I had just implemented a Nivo Slider on a Magento store. I watched the slider perform, and although I saw the nav control said it was going on to the next slide, the slider image hadn’t changed. Clicking on the arrows didn’t work, while the nav control sometimes worked, sometimes not. Was it an issue of z-index? Was it an issue of jQuery 1.8+ versus jQuery 1.9? Whenever I viewed the slider in Firefox, Firebug experienced an error that made Firefox stuck in an error loop, so I had to use Chrome.
All the research I had done to troubleshoot these issues were limited to Nivo Slider (i.e. “Nivo Slider Skipping Images”, “Nivo Slider Nav Control Not Working”), and none of the proposed answers worked for these issues. I didn’t think it had anything to do with Magento, but apparently a function in the Nivo Slider code conflicts with Prototype, according to this StackOverflow Answer.
To fix this, you have to edit one of the last lines in the Nivo Slider javascript file. Instead of
$.fn._reverse = [].reverse;
you need to add an underscore:
$.fn._reverse = []._reverse;
An alternative fix is to make sure you add your Nivo Slider files before the Prototype files in your head.phtml file.
Both of these fixes should work, allowing you to have a slick jQuery slider in Magento without having to buy an extension.
