jquery : bxSlider carousel active classes for all showing items (not single)

Question

Is there any solution to add active classes ?

DEMO http://jsfiddle.net/sweetmaanu/bDRNH/

<div class="slider4">
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar1">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar2">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar3">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar4">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar5">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar6">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar7">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar8">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar9">
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150&text=FooBar10">
    </div>
</div>

hope solution should be in callback.

$('.slider4').bxSlider({
    slideWidth: 300,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
});

possible duplicate of [In bxslider i want to add a class on current slide](http://stackoverflow.com/questions/12745083/in-bxslider-i-want-to-add-a-class-on-current-slide) — isherwood, Oct 15 '13 at 03:00
@isherwood that question for slider. Here I am using carousel there are three `slide` need to have active class — Mo., Oct 15 '13 at 15:55
@bboymaanu - you want active class for all the 3 slides? or apply some styling on the pager? — VJS, Oct 17 '13 at 07:12
@Vijeta Shetty How can I identify which are the active items ? — Mo., Oct 17 '13 at 12:17

score 3 · Answer 1 · answered Oct 17 '13 at 14:36

Looks like there is no inbuilt support to find the active slides for a carousal (multiple slides) However, I think with few manipulations (maybe ugly), you can find the active slide indices. But this too works only after the first slide transition. Check the jsfiddle

To explain how I get the active slide index

   var slider = $('.bxslider').bxSlider({
            minSlides: 2,
            maxSlides: 3,
            controls:false,
            hideControlOnEnd:true,
            infiniteLoop:false,
            onSlideAfter : function(elem, old, newind){ 
              var curfirstIndex;
              var noofslides = Math.round($('.slider_container').width()/180);  //divide by slidewidth + sliderMargin
              $("#Active").empty();
              if(old > newind){
                curfirstIndex = old * noofslides - noofslides;
              }else{
                curfirstIndex = old * noofslides + noofslides;
              }
              $("#Active").append(++curfirstIndex + ", ");     //++ because it starts from 0 and not 1

              for(var i=0; i< noofslides -1 ; i++){
                $("#Active").append(++curfirstIndex + ", ");
              }
           },
  slideWidth: 170,
  slideMargin: 10
 });

I won't be surprised if you don't select this as the answer. I am myself not satisfied with the solution :(

jquery : bxSlider carousel active classes for all showing items (not single)

1 Answers1