Vic Vic - 2 months ago 7
CSS Question

Multiple jQuery carousels on a page

I've been following this tutorial to create a carousel and so far it's working well enough, but I'm a beginner and I need to have multiple instances of this carousel running on a single page. The carousels show up and actually work, however they animate at the same time on the set delay, and when clicking the next/prev buttons or the paging dots. I need them to run independently of each other. I would really appreciate any advice.

Thanks

Answer

Seperate your carousels with individual class. change a bit code at event function like this

Zippy.prototype.events = function(){
    this.$el
        .on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide)
        .on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide)
        .on('click','.indicators li',this.changeSlide);
};

Demo: http://codepen.io/barrel/pres/oBefw