Swiper 实现奇葩需求案例

原创

已于 2024-12-05 10:54:41 修改 · 364 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #swiper

于 2024-12-04 14:20:39 首次发布

昨天晚上临时接到一个奇葩需求，有一个从左到右的滚动列表，要求实现开屏自动滚动，然后到最后一屏的时候停止不动，右箭头置灰，然后点左侧箭头可以往左滚，同时右箭头功能也恢复。

使用 Swiper 实现了，示例代码如下：

html：

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class