解决 vue 项目使用 swiper 遇到设置轮播图自动播放不生效问题

前言

项目使用到 swiper 插件实现轮播图的功能，引入插件放上数据后，设置自动播放，但是发现没起效果，手动拖动可以

解决方法

安装指定版本

可以安装以下版本的，设置自动播放没有问题正常滚动

 "swiper": "^6.2.0"

引入:

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 组件的内容由父组件传入，并且为 dom 结构时 -->
      <slot></slot>
    </div>
    <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-pagination"></div>
  </div>
</template>
  
<script>
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.min.css";
export default {
  data() {
    return {};
  },
  mounted() {
    new Swiper(".swiper-container", {
      autoplay: true,
      // 分页器
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
};
</script>

最新版本

如果直接运行以下命令就是安装最新版本的，我就是使用这个安装的最新版本，设置自动滚动后不生效

npm i swiper

解决方法：

引入部分需要这样子写,可以解决轮播图自动滚动：
import "swiper/swiper-bundle.min.css";
import Swiper, { Navigation, Pagination, Autoplay } from "swiper";
Swiper.use([Autoplay, Navigation, Pagination]);

 mounted() {
    var mySwiper = new Swiper(".mySwiper", {
      slidesPerView: 5, // 可视个数
      spaceBetween: 10, // 间隔
      autoplay: {
        delay: 1500,
        disableOnInteraction: false,
      },
      loop: true, // 循环模式选项
      // 如果需要分页器
      // pagination: {
      //   el: ".swiper-pagination",
      // },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      }
    });
  },