Question

我在视口中使用带有3个项目的bx滑块，我需要它有一个活动列表项的css类（在这种情况下是中间子项），但它不起作用。

这是HTML和javascript：

        <ul class="bxslider" id="slider1">
               <li><img src="img/img-a.png" />

              </li>
              <li><img src="img/img-b.png" />

              </li>
              <li><img src="img/img-c.png" />

              </li>

        </ul>


<script type="text/javascript">
    $(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<script type="text/javascript">
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('#slider1 li').removeClass('active-slide');   
    $('#slider1>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
//     $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}

CSS：

#slider1 li{ 
   opacity:0.5;
   width:290px;
}


#slider1 .active-slide{
  opacity:1;
}

编辑： JSFIDDLE

Answer 1

关于bxslider，关于SO的问题并不多。我对你的问题进行了很多研究，得到了一个解决方案，但我也有一些疑问。让我解释一下

网上有很少的bxslider资源或演示。
网站本身列出了一些演示版，但没有提供任何源代码或适当的教程。
我得到的解决方案使用了与网站上规定的不同的回调。有趣的是，网站上的回调方法对我不起作用。

好的，以下是我所做的更改。

将<ul>封闭在<div>。
对CSS。
更改了Jquery。

HTML和CSS中的更改可以忽略不计，因此我只会粘贴Jquery Here。如需完整更改并查看解决方案，请查看此小提琴。

Working Solution.

Solution with Black & White Effect

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                opacity: 0.2
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                opacity: 1
            }, 100);
        }
    });

});

现在您可以看到我所做的主要更改是我没有向li添加任何类，而是直接通过jquery直接更改 opacity 。

另外，如果您看到，我使用的回调是 'onAfterSlide' 。 'onSlideAfter' 回调不适合我。相反，我尝试 'onAfterSlide '，这是有效的。

编辑：我在这个问题上检查了一下。事实证明我引用的bxslider脚本文件是较旧的3.0版本，因此回调是不同的。最新版本是4.1.1，网站上提到的回调适用于此版本。

这有点令人困惑，网站上没有太多文件来澄清这一点。这是bxslider较新版本的外部链接。

http://bxslider.com/lib/jquery.bxslider.min.js

定位活动幻灯片并添加css类

1 个答案: