Reputation: 2528
I've got a page where user can publish several sliders (carousels) on it. I'm using jQuery to iterate over each of them and assign events and base logic. When there is one slider on a page, everything works good, but when I add a second one, the first slider breaks - it doesn't change captions and current number for the first one, but does it for the second instead. I'm struggling with this problem for several hours already. Here's the code:
(function($){
$(function(){
$('.slider').each(function(){
var slider = $(this),
photos = slider.find('.photos img')
captions = slider.find('.captions p'),
counter = slider.find('.status .current'),
count = 0,
total = photos.length;
slider.find('.status .total').text(total);
photos.eq(0).addClass('active').siblings().hide();
captions.eq(0).siblings().hide();
slider.find('a.previous, a.next').click(function(e){
e.preventDefault();
if(count < (total - 1))
count++;
else
count = 0;
photos.filter('.active').removeClass('active').fadeOut('fast');
photos.eq(count).addClass('active').fadeIn('fast');
captions.eq(count).show().siblings().hide();
counter.text(count + 1);
});
});
});
}(jQuery));
Here's the fiddle.
Upvotes: 0
Views: 101
Reputation: 447
Your are missing a comma:
photos = slider.find('.photos img'), //OVER HERE
http://jsfiddle.net/luckmattos/K3Y9w/3/
Upvotes: 0
Reputation: 481
you have forgotten a comma on line 6:
[...]photos = slider.find('.photos img'),
captions = slider.find('.captions p'),
counter = slider.find('.status .current'),[...]
Here's the fiddle
Upvotes: 2