jQuery jCarousel - how to remove the jCarousel from an element

Question

I am using jCarousel to have a carousel of images in my page. It works great and I have no complaints, but I am using the tabbing on the page and when I go to another tab, there is an ugly jCarousel error. Basically what I want to do is to remove the jCarousel from my element when I go to a new tab but for the life of me can't figure it out.

To add the carousel I am using code like this:

$("#myelement").jCarousel({ /* config params */});

But I am unsure of how to remove .jCarousel from $("#myelement"). Any ideas?

Answer 1

If need only to remove jCarousel, you can use destroy method http://sorgalla.com/jcarousel/docs/reference/api.html#destroy

Answer 2

There doesn't seem to be a remove function as part of the plugin.

You could dig into the source and build one, or a quicker mechanism may be to clone myelement, remove the element and then replace with the cloned version.

Answer 3

You should not do this as it is a horrible solution :P :

You could hide the carousel using CSS and then use .hide and .show based on what tab you are on.

$("#myelement #yourcarouselIDorClass").hide()

Answer 4

Removing an item from jCarousel plug-in

Answer 5

This functionality is currently broke in jcarousel. The remove method exists but does not provide the desired result. An issue was submitted here:

https://github.com/jsor/jcarousel/issues/338

As a workaround, none of which work correctly without breaking the carousel see the discussion here:

Removing an item from jCarousel plug-in