jquery: активные классы карусели bxSlider для всех отображаемых элементов (не по одному)

Есть ли решение добавить активные классы?

ДЕМО 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>

надеюсь, что решение должно быть в обратном вызове.

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

javascript carousel jquery css bxslider
person Mo.    schedule 14.10.2013    source источник
comment
возможный дубликат В bxslider я хочу добавить класс на текущем слайде   -  person isherwood    schedule 15.10.2013
comment
@isherwood, этот вопрос для слайдера. Здесь я использую карусель, есть три slide, которые должны иметь активный класс   -  person Mo.    schedule 15.10.2013
comment
@bboymaanu - вы хотите активный класс для всех 3 слайдов? или применить некоторые стили на пейджере?   -  person VJS    schedule 17.10.2013
comment
@Vijeta Shetty Как я могу определить, какие элементы являются активными?   -  person Mo.    schedule 17.10.2013

Ответы (1)


arrow_upward
3
arrow_downward

Похоже, нет встроенной поддержки для поиска активных слайдов для карусели (несколько слайдов). Однако, я думаю, с небольшими манипуляциями (возможно, некрасивыми) вы можете найти индексы активных слайдов. Но это тоже работает только после первого перехода слайда. Проверьте jsfiddle

Чтобы объяснить, как я получаю индекс активного слайда

   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
 });

Я не удивлюсь, если вы не выберете это в качестве ответа. Я сам не доволен решением :(

person VJS    schedule 17.10.2013