Missing CarouFredSel animation when using JQuery UI Tabs

Question

I'm working on the site new.xpient.com. On the front page I'm using the JQuery UI tabs, and for an auto scrolling gallery I'm using CarouFredSel. I've looked heavily into the documentation for both issues, but I'm having a problem.

It seems that if you switch tabs, the new content (li items) don't move. Even if you switch back to the initial tab, the animation stops. I'm assuming this means the script is only ran at first when the document is loaded and not applied to new uls, as you switch through them with the tabs.

Here is my code, I'm sure you need to see it.

http://pastebin.com/QVEBejab

How can I make CarouFredSel work together with JQuery Tabs?

Answer 1

Each carousel should not have display: none as in closed jQuery UI tabs, but you can override standard UI CSS style:

#yourtabs.ui-tabs .ui-tabs-hide {
    display: block !important;
    visibility: hidden;
    height: 0;
}

Answer 2

I solved this by first getting jquery script, then, the caroufredsel script between the head tags. And finally (just before < / body > ), I get the Tabs script.