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

Question

我正在使用 JQuery 来处理水平滑块，现在我想要在下面的这些示例中使用类似的东西：第一张图片显示了我目前所拥有的。第二个显示我想做的事。 'none active' 的项目，因此中心项目左右两侧的项目需要淡出一点。

所以有人知道如何 select 不活动的幻灯片并帮助我完成这个吗？

我的代码：

<!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选项在当前幻灯片中添加一个class：

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

在您设法将 'active' class 添加到活动幻灯片后，只需 CSS:

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

以上示例来自记忆（伪代码），并非旨在作为复制粘贴解决方案。

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

JQuery slider: fade non active slides

html

javascript

css

jquery

bxslider