Vue3+Vite中引用Swiper11自动轮播、左右切换不生效，已解决

1.安装swiper

npm install swiper

2.导入依赖

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

3.导入、注册模块（最关键一步）

// 导入Swiper模块
import {Autoplay, Navigation} from "swiper/modules";
// 注册Swiper模块
Swiper.use([Autoplay, Navigation]);

4.实例化Swiper对象

var swiper = new Swiper('#' + props.swiperId, {loop: true,autoplay: {delay: 3000,disableOnInteraction: false,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});

5.创建组件
组件文件名称top-swiper

<template><div class="swiper" :id="swiperId":style="{ height: isMobile? innerWidth + 120 + 'px': innerHeight - 120 + 'px' }"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item, index) in swiperList" :key="index"><div class="swiper-slide-home flex flex-col justify-center items-center px-4":style="{ 'background-image': 'url(' + item.imgUrl + ')' }"><div class="swiper-slide-home-title text-white mb-4 qx-animate">{{item.title}}</div><div class="swiper-slide-home-desc text-white qx-animate">{{item.desc}}</div></div></div></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div></div></template>
<script setup>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';// 导入Swiper模块
import {Autoplay, Navigation} from "swiper/modules";
// 注册Swiper模块
Swiper.use([Autoplay, Navigation]);import {defineProps} from "vue";
import {onMounted, ref} from "vue";// 定义props
const props = defineProps({swiperId: {type: String,default: 'swiper-container'},swiperList: {type: Array,default: () => []}
});// 获取窗口大小
const innerWidth = ref(window.innerWidth);
const innerHeight = ref(window.innerHeight);
// 判断是否为移动端
const isMobile = ref(innerWidth.value < 768);// 监听窗口大小变化
window.addEventListener('resize', () => {innerWidth.value = window.innerWidth;        // 获取窗口宽度innerHeight.value = window.innerHeight;      // 获取窗口高度isMobile.value = innerWidth.value < 768;      // 判断是否为移动端
});// 组件挂载完成后初始化swiper
onMounted(() => {var swiper = new Swiper('#' + props.swiperId, {loop: true,autoplay: {delay: 3000,disableOnInteraction: false,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});})
</script>
<style lang="scss" scoped>
.swiper {width: 100%;.swiper-slide-home {height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;.swiper-slide-home-title {font-size: 36px;font-weight: lighter;}.swiper-slide-home-desc {font-size: 20px;font-weight: lighter;}}
}
</style>

6.组件的使用

<template><TopSwiper :swiperList="swiperList" swiper-id="swiper-index"></TopSwiper>
</template>
<script setup>
import TopSwiper from "@/components/top-swiper/index.vue";
import {reactive} from "vue";//轮播图数据
import backgroundImg2 from "@/assets/image/banner02.png";
//轮播图集合
const swiperList = reactive([{imgUrl: backgroundImg2,title: '我们能做什么',desc: ' 储能设备管理 | 光伏板 | 消费设备管理 | 任务工单 | 人员管理 | 在线缴费 | 设备保修',link: ''},{imgUrl: backgroundImg2,title: '我们能做什么',desc: ' 储能设备管理 | 光伏板 | 消费设备管理 | 任务工单 | 人员管理 | 在线缴费 | 设备保修',link: ''}
]);
</script>
<style scoped lang="scss"></style>

7.依赖版本

 "dependencies": {"sass": "^1.32.13","sass-loader": "^10.1.1","swiper": "^11.1.14","vue": "^3.4.37","vue-router": "^4.4.5","vite": "^5.4.1","@vitejs/plugin-vue": "^5.1.2"},