---

背景（重点，一定要看！！！！）

swiper各个版本和vue版本的映射
https://www.jianshu.com/p/7ba3e3d501a4

一、先看效果

image.png

二、指定版本安装swiper

注意swiper在6x之上的版本和6x之下的版本使用有很大差异

npm install swiper@6.8.4 --save

三、引入样式

//样式  6.x版本之上的引入方式
import "swiper/swiper-bundle.css";
import { Swiper, Navigation, Pagination, Autoplay } from "swiper";

四、引入组件

这一步是关键，一定要注意！！！

4.1、引入

import { Swiper, Navigation, Pagination, Autoplay } from 'swiper'

4.2、使用

Swiper.use([Navigation, Pagination, Autoplay])

4.3、解释：

4.3.1、Navation

前进、后退按钮点击有没有效果；如果没有他，只有样式，点击不起作用

4.3.2、Pagination

分页器出不出现，点击有没有效果；很大的情况下分页器不出现，可能就是这个的影响。

一定要加上clickable: true，这样点击分页器，才有效！（下方有完整代码）

4.3.3、Autoplay

能不能自动播放就靠他！

4.4、轮播图点击事件触发

 // swiper点击事件
      on: {
        click: function (e) {
          console.log(e);
          window.open("http://www.haikangborui.com", "_blank");
        },
      },

五、完整代码

<template>
  <!-- 轮播图 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in imgList" :key="index">
        <img :src="item.url" alt="" width="821" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

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

<script>
import { Swiper, Navigation, Pagination, Autoplay } from "swiper";
export default {
  name: "Swiper",
  data() {
    return {
      imgList: [
        {
          url: require("/public/img/bg/welcome/swiper1.png"),
        },
        {
          url: require("/public/img/bg/welcome/swiper2.png"),
        },
        {
          url: require("/public/img/bg/welcome/swiper3.png"),
        },
      ],
    };
  },
  mounted() {
    Swiper.use([Navigation, Pagination, Autoplay]);
    new Swiper(".swiper-container", {
      slidesPerView: 2, //设置slider容器能够同时显示的slides数量
      spaceBetween: 80, //slide之间的距离（单位px）
      centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      loop: true,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      autoplay: {
        delay: 3000, //3秒切换一次
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      // swiper点击事件
      on: {
        click: function (e) {
          console.log(e);
          window.open("http://www.haikangborui.com", "_blank");
        },
      },
    });
  },
};
</script>

<style lang="scss">
.swiper-container {
  position: relative;
  width: 100%;
  height: 360px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1.1);
  transition: 0.5s;
  z-index: 2001;
}
</style>