Question

我正在使用JQuery处理水平滑块，现在我想要下面这些示例中的内容：第一张图片显示了我到目前为止所拥有的内容。第二个显示我想要做的事。没有活动的项目＆＃39;所以从中心项目左右的，需要消失一点。

enter image description here

所以有人知道如何选择不活跃的幻灯片并帮助我完成这项工作吗？

我的代码：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <script src="jquery-1.11.0.min.js"></script>
        <script src="jquery.bxslider.min.js"></script>
        <link href="jquery.bxslider.css" rel="stylesheet" />
    </head>
    <body>
        <div class="slider4">
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
          <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>
    <script type="text/javascript">
    $(document).ready(function(){
      $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10,
        infiniteLoop: true
      });
});  
    </script>
    </body>

</html>

Answer 1

您可以尝试使用bxSlider的onSliderLoad和onSlideAfter选项将类添加到当前幻灯片中：

    onSliderLoad: function () {
        $('.slider4 > div:not(.bx-clone)').eq(1).addClass('active');
    },
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        $('.slide').removeClass('active');
        $($slideElement).next().addClass('active');        
    }

在您设法添加“活跃”后，在活动幻灯片中，它只是CSS的问题：

.slide:not(.active){
  opacity:0.8;
}

以上示例来自内存（伪代码），并非用作复制粘贴解决方案。

JQuery滑块：淡化非活动幻灯片

1 个答案: