Controls Inactive on 2nd carousel when using Multiple carousels on one page.

[IAmOrion]

I have a page with 2 carousels.

They both have their own classes and css etc, when I load the page, the 2nd carousel has both controls set as inactive. If I lose focus (eg, in firefox, if I were to change to a different tab, and then back again) ... the 2nd carousel then becomes active!

I can not figure out why. After changing tab, and then going back, all carousels works as expected and correctly. It's just on initial load (reload/refresh etc) it doesn't work. - but it can't be a class use etc surely, as changing my current active browser tab and then back fixes whatever the issue is!

Any ideas?

[jsor]

Could you setup a jsfiddle where i can see your setup?

[IAmOrion]

http://heart-angel-2.myshopify.com/

Code is in-line whilst testing so you should be able to see everything. The second carousel is the one not working (controls)

[jsor]

THe problem is most probably that you haven't set an explicit width for the items. Neither the <li> elements nor the images have a width. So, jCarousel can't figure out the exact widths until the images are fully loaded.

The easiest fix is to set a width. Alternatively you could reload the carousel on window load:

$(window).load(function() {
    $('.instafeed').jcarousel('reload');
});

[IAmOrion]

interesting... I already tried the reload function but it didn't work, I know the width the li items will be so I will set a width and test.

[IAmOrion]

Hmm setting a width didn't work, however $(window).load(function() { $('.instafeed').jcarousel('reload'); });

seems to have done the trick - thanks for the help.

I close this now as it appears to be working :)