Reputation: 1240
I am using Flexslider to create several sliders on a page. It's a Wordpress so the posts are created dynamically. I'm counting the slides with the callback function and this line:
$('.promo-image-counter').text(slider.count);
but of course it changes the text on all of the image counters (all of the sliders show the number of slides from the last slider), I need to count the slides on each slider individually.
My code so far:
$(".slider-promos").flexslider({
animation: "slide",
controlNav:false,
touch:true,
start: function(slider){
$('body').removeClass('loading');
$('.promo-image-counter').text(slider.count);
$('.slides li img').show();
}
});
Upvotes: 0
Views: 1167
Reputation: 1240
I have correctly count the slides on each slider with this code:
$(".slider-promos").flexslider({
animation: "slide",
controlNav:false,
touch:true,
slideshow: false,
start: function(slider){
$('.slides li img').show();
$('body').removeClass('loading');
$(slider).find($(".promo-image-counter")).text(slider.count);
}
});
Needed to use
$(slider).find($(".promo-image-counter")).text(slider.count);
instead of
$(this).find($('.promo-image-counter')).text(slider.count);
Upvotes: 2
Reputation: 6579
I need to count the slides on each slider individually.
You already do this, your failure is that you overriding the ".promo-image-counter" content with the count of the latest created slider instance. As you assume, you want this behaviour for each slider. You can reach this by selecting ".promo-image-counter"-element for each slider, something like this:
$('.slider1.promo-image-counter').text(slider.count);
Upvotes: 0