如何在vue2项目中使用Swiper5轮播

一、npm下载安装swiper@5版本（“swiper”: “^5.4.5”）

npm i swiper@5

二、导入js和css

// 导入js
import Swiper from 'swiper'
// 引入css
import 'swiper/css/swiper.min.css'

三、添加HTML内容

Swiper7的默认容器是".swiper"，Swiper6之前是".swiper-container"。

<template>
  <div class="swiper-container">
    <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>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

四、初始化swiper

这一步用到了Swiper的真实DOM结构，在vue项目里应该写在生命周期mounted(){}中。
如果用接口请求到的数据，就需要写在updated(){}中。

mounted() {
    
    
    new Swiper(".swiper-container", {
    
    
      direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
    
    
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
    
    
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
    
    
        el: ".swiper-scrollbar",
      },
    });
  },

参考视频地址：https://www.bilibili.com/video/BV1TY4y1z7Z8/?spm_id_from=333.337.search-card.all.click&vd_source=d45e199a358edbf199494ee895775ab3