Swiper5&6使用方式以及一些坑

1.安装

npm install swiper --save

2.swiper引入方式

swiper5：

import Swiper from 'swiper' // js 模块
import 'swiper/css/swiper.css'; // css 模块

swiper6：

import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块
import 'swiper/swiper-bundle.css' // css 模块
Swiper.use([Pagination, Navigation, Autoplay])

swiper6只能按需引入

css文件夹路径改变

3.初始化

 // eslint-disable-next-line no-unused-vars
   const swiper = new Swiper('.filmswiper', {
      // direction: 'vertical',
      loop: true,
      centeredSlides: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true // 允许分页点击跳转
      },
      // 自动轮播
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
      //导航小点
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })

4.一个页面有多个轮播图

需要new多个轮播图实例，为了互相不影响，可以在基础类前面加上父类

 // eslint-disable-next-line no-unused-vars
   const swiper = new Swiper('.filmswiper1', {
      // direction: 'vertical',
      loop: true,
      centeredSlides: true,
      // 如果需要分页器
      pagination: {
        el: '.filmswiper1 .swiper-pagination',
        clickable: true // 允许分页点击跳转
      },
      // 自动轮播
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
      //导航小点
      navigation: {
        nextEl: '.filmswiper1 .swiper-button-next',
        prevEl: '.filmswiper1 .swiper-button-prev'
      }
    })

 // eslint-disable-next-line no-unused-vars
   const swiper = new Swiper('.filmswiper2', {
      // direction: 'vertical',
      loop: true,
      centeredSlides: true,
      // 如果需要分页器
      pagination: {
        el: '.filmswiper2 .swiper-pagination',
        clickable: true // 允许分页点击跳转
      },
      // 自动轮播
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
      //导航小点
      navigation: {
        nextEl: '.filmswiper2 .swiper-button-next',
        prevEl: '.filmswiper2 .swiper-button-prev'
      }
    })