如何使用Swiper

如何使用Swiper

俗称：轮播图

官方文档：https://www.swiper.com.cn/usage/index.html

• 在静态页面中使用

  1. 引入swiper.min.css

  2. 设置宽度（Swiper6之前是.swiper-container，Swiper7是.swiper，就是指下面那个最大的div容器的class名字，像这种静态引用的话，随便用哪个都行，只要对上了就行）

     .swiper-container {
     	width: 400px;
     	height: 200px;
     }
     

  3. 引入官网那个模板之后，引入swiper.min.js，并进行初始化

     let mySwiper = new Swiper ('.swiper-container', {
             loop: true, // 循环模式选项
     
             // 如果需要分页器
             pagination: {
                 el: '.swiper-pagination',
             },
     
             // 如果需要前进后退按钮
             navigation: {
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
             }
         })
     

• 项目中引入

  1. npm i swiper
  2. import Swiper from 'swiper'
  3. import 'swiper/css/swiper.css' （注意，在项目中使用也是要引入 css 的）

Vue2中不支持7和8，最好使用 npm install swiper@5.4.5 这个版本不会出什么问题（此版本里面类名必须为.swiper-container）