jquery :bxSlider 轮播活动类，用于所有显示项目(非单个）

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

本文关键字：项目 显示 单个 用于 bxSlider 活动 jquery      更新时间：2023-09-26

有什么解决方案可以添加活动类吗？

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

看起来没有内置支持来查找轮播（多张幻灯片）的活动幻灯片但是，我认为只需很少的操作（可能很丑陋），您就可以找到活动的幻灯片索引。但这也仅在第一次幻灯片切换后有效。检查 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
 });

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

相关文章：