jCarousel Next Button Doesn't Work Unless Inspected by Developer Tool

Question

I did a clean jCarousel setup, meaning I didn't use the provided stylesheet or any of the skins and styled it from scratch. But the Next button isn't working. The weird thing is that it does work after I inspect it with FireBug or the built-in element inspector on Chrome. I assume it has something to do with the element being in focus, but I don't know how to fix the problem. I tried modifying the z-indexes of the elements but to no avail. Any ideas as to what's going on here? Thanks!

Answer 1

A bit old.. but this could help someone else with the same problem:

I tried many solution, the only one that worked for me was playing with css definitions. The values of the caorousel container in your selected skin.css are used by jcarousel to evaluate the number of visible elements, and, i presume, some other thing.

Try to set the width of these elements:

.jcarousel-skin-tango .jcarousel-container-horizontal {
[..]
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: ..;
[..]
}

The "next" button stopped working form me when using a width greater than the containig div. And with some other value, I don't know why.

Answer 2

Perhaps you left some

console.log(...)

in your code. Try removing those