Swiper9轮播之坑，研究Swiper Loop 模式的使用，动态文字如何连贯动画？

2023-12-28 05:11:25

揭秘 Swiper Loop 模式：让轮播动画连贯如丝

正文

在最近开发一个 React 轮播功能时，我遇到了一个棘手的难题：文字动态在克隆项目时会重置，导致动画播放不连贯。

经过一番思考，我意识到这是由于克隆项目会重新实例化组件，进而影响生命周期回调函数的执行时机。虽然可以通过设置一个临时变量来重新执行动画，但这种临时解决方案不够优雅。于是，我开始深入研究 Swiper Loop 模式的使用，期望找到更完善的解决办法。

Swiper Loop 模式：详细解析

在了解 Loop 模式之前，让我们先了解 Swiper 初始化参数中关于它的部分：

loop：{
  enabled：false，//是否开启loop模式
  loopedSlides：3，//循环的个数，与 slidesPerView 无关，无需设置大于 slidesPerView 的值。
  loopAdditionalSlides：4，//额外的循环个数，将自动根据 loopedSlides 选项或 slidesPerView 的值计算。
},

起初，我以为设置好 enabled、loopedSlides 和 loopAdditionalSlides 这几个参数就能实现无限轮播，但实际上，对于 loopedSlides 和 loopAdditionalSlides 这两个参数，还需要深入理解：

loopAdditionalSlides ：将增加幻灯片的数量，可在初始幻灯片和最后幻灯片之间插入额外的幻灯片作为循环填充。
loopedSlides ：为循环模式设置额外的幻灯片数量，允许循环幻灯片的数量无限。

掌握了这两个参数的用法后，动画播放不连贯的问题迎刃而解。

代码实现

以下是我用 Swiper Loop 模式实现无限轮播的代码示例：

    const slides = [
      {
        img:'https://swiperjs.com/demos/images/nature-1.jpg'
      },
      {
        img:'https://swiperjs.com/demos/images/nature-2.jpg'
      },
      {
        img:'https://swiperjs.com/demos/images/nature-3.jpg'
      },
      {
        img:'https://swiperjs.com/demos/images/nature-4.jpg'
      },
      {
        img:'https://swiperjs.com/demos/images/nature-5.jpg'
      },
      {
        img:'https://swiperjs.com/demos/images/nature-6.jpg'
      },
    ]
    return (
      <Swiper slidesPerView={1} pagination={pagination} loop={true} loopedSlides={4} loopAdditionalSlides={1}>
        {slides.map((i, index) => {
          return (
            <SwiperSlide key={index}>
              <img alt="" src={i.img} />
            </SwiperSlide>
          )
        })}
      </Swiper>
    );