Extra Bullets Appearing in Cycle2’s Pager

Published by John on February 16, 2017 Under Javascript, Web Design

Cycle2 is the next iteration of the jCycle Slideshow and a pretty easy/solid way for getting a image(or html) slideshow going. I’ve been using it for awhile now when I need to do a relatively simple carousel, as it works well, is reasonably responsive/mobile friendly, and has enough features/options to accommodate most needs.

One thing I like about it is that you can add most options as a ‘data-cycle’ html attribute to the slideshow wrapper, which ends up making customizing it pretty easy(and a lot cleaner than adding a bunch of attributes to the javascript options array.)

I was running into an issue yesterday for a magento template for a website project I am working on, where the number of bullets in the pager was doubling, even though the slides was correct.

I tried playing with the data-cycle-slides option and switching to just using Images(instead of Divs,) switching to a list, and other elements, along with a lot of other troubleshooting, but no matter what, the number of bullets were doubled in the pager. Clicking on any of the bullets resulted in an empty slide being shown, but if you just let the slideshow run, it only showed the three valid slides in the slideshow.

After spending way too much time on this, it turned out to be 100% user error(although definitely an odd bug.) As it turns out, if you include cycle2 javascript file more than once on the page, the number of bullets double. Since this stores template is based off Magento’s RWD, cycle2 was already being included and I had added it in the custom module I was working on.

TLDR: Check and make sure you haven’t included the Cycle2 Javascript file(jquery.cycle2.min.js or jquery.cycle2.js) more than once on the page.

So, why is it happening?

The pager is not part of the core cycle2 script, but instead gets added towards the bottom as a plugin that extends the cycle2 options/functionality. When the actual javascript include file gets included twice, this plugin gets added twice and as a result, will effectively double the amount of pager bullets(or whatever you have pagerTemplate set to) being shown.

Each time you include it, the bullets get added again, so, for example, including jquery.cycle2.min.js or jquery.cycle2.js 4 times with a slideshow of 3 slides will result in 12 bullets being shown(but only the first three will actually work/cycle.)

Prevnext, progressive loader, tmpl, loader, hash, command, caption, and several other methods/options are also loaded in a similar manner, so I would expect you might see some other weirdness with some or all of that functionality including the script type.

No Comments |