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

Why does bxSlider break my transition between last and first slide?

本文关键字：一张 幻灯片 之间 转换 bxSlider 最后 为什么      更新时间：2023-09-26

我使用的是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;    
}

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。

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

  • 删除了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幻灯片
    • 这是因为只有一个类可以处理

自述.md

柱塞

相关文章：