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

【问题标题】：jquery : bxSlider carousel active classes for all showing items (not single)jquery：所有显示项目的 bxSlider 轮播活动类（不是单个）
【发布时间】：2013-10-14 23:35:55
【问题描述】：

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

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

【问题讨论】：

In bxslider i want to add a class on current slide的可能重复
@isherwood 滑块问题。这里我用的是轮播，有3个slide需要有活动类
@bboymaanu - 您想要所有 3 张幻灯片的活动课程吗？或在寻呼机上应用一些样式？
@Vijeta Shetty 如何识别哪些是活动项目？

标签： javascript jquery css carousel bxslider

【解决方案1】：

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

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

【讨论】：