介绍

最流行的滑动轮播库之一，支持竖向、横向滑动，支持PC和移动端。

https://swiperjs.com/get-started/

npm i -S swiper

使用

保证内部 swiper-slide 元素加载完成后，再实例化 swiper 。如果遇到滚动异常，首先排查是否加载顺序问题。

直接写 div 然后实例化，或者自己写包装器，没必要使用第三方或官方包装器。

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

实例化：

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },

  // 事件
  on: {
    init: function () {
      /* do something */
    },
    slideChange: function () {
      /* do something */
    },
  }

实例状态、方法：

// 可在 slideChange 事件中读取，获取当前是否已到底部
console.log(mySwiper.isEnd)

mySwiper.slideNext();