Question

有没有添加活动类的解决方案？

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>

希望解决方案应该在回调中。

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

Answer 1

看起来没有内置支持来查找carousal的活动幻灯片（多张幻灯片）但是，我认为只需要很少的操作（可能很难看），你就可以找到活跃的幻灯片索引。但这仅在第一次幻灯片转换后才起作用。 Check the 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
 });

如果你不选择这个作为答案，我不会感到惊讶。我自己对解决方案不满意:(

jquery：所有显示项目的bxSlider轮播活动类（不是单个）

1 个答案: