Multiple Dynamic Carousel on the same page

[vikasdream]

Hi,

I want to show multiple carousel on the same page and for this I'm generating those carousel dynamically not static. Also I'm calling a .js file with all configuration options.

But main problem is that all the carousel is not working together on the same page means if I click on the next button of one carousel other carousels items is moving which is wrong.

Each carousel should work separately.

How do we attach the prev() and next() events to specific carousels, and not every carousel?

Please let me know it is possible or not with jcarousel. Can you please guide me how can i achieve this functionality.

Through Jcarousel I achieved a lot but for this issue I'm not getting the right solution please help me.

Thanks a lot.

Viki

[vikasdream]

any one can guide me for above issue... ?

[leandroruel]

i think you will need use the API method reload, to reload the new carousel http://sorgalla.com/jcarousel/docs/reference/api.html#reload

[shohel2299]

This jCarousel works fine when i am using one carousel in one page, but when i use it for multiple carousel in same page then first one works fine, but the second one not getting responsive. Any changes on jcarousel.responsive.js effect only first slider not the second one. So please help me to solve it. I want to use this carousel because i like this one.

See the attachement. next and previous is working for both slider but second one is not going to be responsive. I am using same coding for both slider, but you see in image that 1st one getting 4 images and 2nd one getting 3 images.

.

Thanks Nur

[jsor]

I've update the responsive example to work with multiple carousels. See c84617f50cb9cd5515f1b0bb156fff16940f7438.

[snoooplex]

Anybody knows how to fix this issue #713 ?

[jsor]

I really don't see the issue here. If you have multiple carousels, just use different classes. Everything is explained here: http://sorgalla.com/jcarousel/docs/plugins/control/reference/installation.html

var carousel1 = $('.jcarousel1').jcarousel({
    // Core configuration goes here
});

$('.jcarousel1-prev').jcarouselControl({
    target: '-=1',
    carousel: carousel1
});

var carousel2 = $('.jcarousel2').jcarousel({
    // Core configuration goes here
});

$('.jcarousel2-prev').jcarouselControl({
    target: '-=1',
    carousel: carousel2
});

[6clicks]

Sorry I don't see how to do that with responsive carousel?

the carousel is called in jcarousel.responsive.js right? ( no other initialization?)

What exactly I have to change on it to have 2 different carousel ?

sorry about that... maby it's me ....

[jsor]

My comment was a reply to the previous comment which mentions the responsive example. I have explained in the following comment how to use 2 different carousel.

[6clicks]

Sorry I must be stupid... I can not di it... where exactly I have to put this code. I tried in a separate .js file. I tried at the en fo jcarousel.responsive.js. I tried at the bottom of my document.

I am lost... I have my tow carousel with my tow classes( .jcarousel1 and .jcarousel2) my css work fine .. I miss juste de correct config ti have the dynamic width.. can you help me la little? sorry about that...

[jsor]

If you provide a reproducible test-case on jsfiddle or similar i can try to help.

[6clicks]

Thank's but it's a local dev in wordpress..

I Will try to reproduce it but it's not shure I can made it.

maybe you have an URL with a working demo or live? ... in any case Thank's a lot for the support.

Yes! there is my codepen with my code: http://codepen.io/6clicks/pen/MYmEqV

[6clicks]

Have You find my mistake some where? thank's a lot.

[jsor]

In your markup you use .jcarousel1-control-prev but in your js code you use .jcarousel1-prev. Same for the next control.

[6clicks]

Harggg thank's .... I have still the problem with the responsive with... I have to do some thing but I don't know what? ... thank a lot! you rocks!

[jsor]

Just use the same code for both carousels: http://codepen.io/anon/pen/qEXxxY

[6clicks]

YES!!! thank's a lot!!!!!