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

本是古典何须时尚 2022-09-16 05:49 516阅读 0赞

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'
          }
        })