Two carousels with autoRotate not working on single page

[furiabhavesh]

<div class="crsl-items">
  <div class="crsl-wrap"></div> <!--Slideshow 1-->
  <div class="crsl-wrap"></div> <!--Slideshow 2-->
</div>

jQuery(document).ready(function($){
  $('.crsl-items').carousel({
    autoRotate:3000
  });
});

The slideshow breaks when you have two on a same page with autoRotate.

[basilio]

Hi @furiabhavesh, sorry for my late reply. You can create two or more carousels, but adding different .crsl-items blocks, just like works on the example page http://basilio.github.io/responsiveCarousel/

<div id="carousel-01" class="crsl-items">
    [...]
</div>
<div id="carousel-02" class="crsl-items">
    [...]
</div>

Cheers

[furiabhavesh]

Hi @basilio,

There is no such example anywhere where it contains two carousels on a page that too with "autoRotate" enabled. It would be great if you could share some working example.

[basilio]

Hi, Yes, you're right. There's a problem when you call the plugin like $('.crsl-items').carousel(); for 2 or more galleries. I recommend you add an id for each gallery (as the above example) and call the plugin as follows:

    $('.crsl-items').each( function(){
        $('#'+this.id).carousel({ autoRotate : 4000 });
    });

Tell me if this works for you. Bye