使功能分别作用于每个元素

Question

I'm creating a wordpress element that will show post excerpts in a carousel. To demonstrate what I am doing I've created a github repository with a html version of the carousel.

https://github.com/dingo-d/Post-Excerpt-Carousel

The carousel is working mostly fine, but I have an issue that I don't understand where it's coming from. When I have one carousel on a page, all is working fine. But what if there are two or more on the same page?

What happens is that when you click on next icon, the slider where you've clicked it will move to the left, and the classes will switch from one item to another list item (active class), but those classes will move on all carousels on the site (there is a html file with multiple carousels on repo).

I've created a function that will manage the movement and clicking, and I'm calling it like this:

$('.post_excerpt_carousel').each(function(){
    var $this = $(this);
    post_excerpt_positioning($this);
});

I've done it like this, so that I can toggle it on resize also.

I've created a fiddle here but it's easier to see the repository and download the examples folder (better visibility).

How to prevent the classes switching on all carousels, and make them switch only when I click on a certain carousel?

EDIT: Codepen preview: http://codepen.io/dingo_d/pen/doNyMw

Answer 1

The problem was on line 61 in main.js :

var $a = $('.active');

You are selecting all the elements having .active class.

You can fix this just by replacing this line with :

var $a = $('.active', $carousel);

This way, it will select only the .active found inside $carousel