为什么 bxSlider 会中断我在最后一张和第一张幻灯片之间的过渡？

Question

我正在使用 bxSlider，对于每张幻灯片，我都有几个 HTML 元素，而不仅仅是一个图像。我需要使活动幻灯片比其他幻灯片更大，我已经使用 css 缩放和过渡实现了这一点，但是当我从第一张幻灯片移动到第二张幻灯片或从第二张幻灯片移动到第一张时，我的过渡丢失了，我意思是它只会长大但不做动画，其他所有幻灯片都可以，有人知道为什么这个过渡会中断吗？

这是我的代码

$('#sliderTrend').bxSlider({
            slideWidth: 300,
            minSlides: 1,
            maxSlides: 3,
            moveSlides: 1,
            slideMargin: 3,
            pager: false,
            onSliderLoad: function () {
                $('#sliderTrend>div:not(.bx-clone)').eq(1).addClass('active-slide');
                $('#sliderTrend>div:not(.bx-clone)').eq(1).removeClass('inactive-slide');
            },
            onSlideBefore: function ($slideElement, oldIndex, newIndex) {
                $('.slideC2').removeClass('active-slide');
                $('.slideC2').addClass('inactive-slide');
                $($slideElement).next().removeClass('inactive-slide');
                $($slideElement).next().addClass('active-slide');
            }
        });

这些是我的 css 类

.active-slide {
    zoom:100%;
    margin-top:0px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;
}

.inactive-slide {
    zoom:75%;
    margin-top:60px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;    
}

Answer 1

SO36637125

为什么 bxslider 会中断我在最后一张和第一张幻灯片之间的转换？

bxSlider 很难确定，它是一个非常灵活但喜怒无常的插件。我相信这是回调太多了。每个滑块同时删除和添加 2 个类，这对于 JavaScript 这样的单线程语言来说是不健康的行为。

在处理活动和非活动状态时，您应该知道 bxSlider 有它自己的.active 类，活动滑块始终是左侧的滑块，而不是中间的滑块。考虑到这一点，这就是我们所做的：

• 删除了 .inactive-slide 类。不要处理两个状态，而是使用一个活动状态，并使用默认状态（幻灯片通常是这样的）。

• 将.active-slide 类更改为.act，因为这样可以节省打字时间。将 CSS 规则更改为：

    .act {
       transition-duration: 1s;
       transition-timing-function: ease-in;
       transform: scale(2);
       transform-origin: center center;
       z-index: 9999999;
    }
  

  • 使用z-index 将幻灯片左右重叠。

  • 请注意，没有 position 属性。这是因为默认情况下每张幻灯片都是position: relative。

  -有关动画属性的详细信息，可以找到here。

• 删除了 onSliderLoad 回调，因为它很不稳定。我已经使用 bxSlider 几年了，但我只能让它工作几次。

• 更改了onSlideBefore 回调以简化它：

    onSlideBefore: function($ele, from, to) {
       var $act = $ele.next();
       $act.addClass('act');
       $act.siblings().removeClass('act');
    }
  

  • 第一行主要引用位于左侧的实际活动滑块（即$ele）并定位活动幻灯片之后的下一张幻灯片，因此现在.act 类将分配给中间幻灯片。李>
  • 第二行.addClass('act') 到中间幻灯片（即$act）。
  • 最后一行通过使用.siblings() 从除$act 之外的每张幻灯片中删除.act 类来确保只有一张$act 幻灯片。
  • 这是可行的，因为只有一个类需要处理。

README.md

PLUNKER