在vue项目中使用简单的swiper_swiper5 grid-优快云博客

本文链接：https://blog.youkuaiyun.com/runforwardplz/article/details/113520642

本文介绍如何在Vue项目中使用Swiper实现图片轮播功能，包括安装依赖、引入样式、配置轮播参数等步骤，并解决了循环播放时点击事件失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中使用简单的swiper（6.0以下版本，本人使用的是5.4.5版本）

如果需要了解其他高版本使用方法，请参考官网 https://www.swiper.com.cn/

1、首先肯定是要安装依赖的

npm install swiper@5.4.5 --save

2、在script中引入swiper及样式

import Swiper from "swiper";

// import style (<= Swiper 5.x) 6.0以下版本的样式引入方法
import 'swiper/css/swiper.css'

3、在视图中使用

<div class="swiper-container swipersData">
	<div class="swiper-wrapper">
		<div class="swiper-slide" v-for="(item,index) in listData" :key="index">
			<img :src="item.img" alt="">
		</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

1）这个swipersData是为了设置样式自己定义的类名；
2）listData是在data中定义的要轮播的内容；
3）swiper-pagination是轮播图下方的小圆点，如下图：
在这里插入图片描述

4、在mounted中配置

this.$nextTick(()=>{
	let vm = null;
	vm = this;
    var swiper = new Swiper('.swipersData', {
    	pagination: {
			el: '.swiper-pagination',
		},
    	autoplay: {
			disableOnInteraction: false, //手动滑动之后不打断播放
			delay: 2000
		},
		loop:true,
		on: {
			click: function () {
				// 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法     
				const realIndex = this.realIndex;
				vm.lunboTiaozhuan1(realIndex); 
			}
		},
	});
})

1）let vm = null;vm = this;
这是解决轮播图设置循环播放loop:true,之后，点击事件失效问题用的：
2）在new Swiper的时候，’.swipersData’这个类名要和视图中定义的类名保持一致；
3）el: ‘.swiper-pagination’,这个是设置下方小白点用的，类名同样要和视图中的保持一致；
4）vm.lunboTiaozhuan1(realIndex); 这个lunboTiaozhuan1是在methods中定义好的方法在这里调用，所传参数realIndex就是为了解决轮播图循环播放点击事件失效的问题的。
5）至于增加别的配置，可到官网才看，不做详细说明。