基于Vue的简易Swiper组件

无所谓_我会出手

已于 2022-11-02 20:48:57 修改

阅读量288

点赞数

文章标签： vue.js javascript 前端

于 2022-11-02 20:37:00 首次发布

本文链接：https://blog.csdn.net/missyoueverytime/article/details/127657493

版权

本文介绍了如何基于Vue.js创建一个简易的Swiper组件，尽管目前该组件未包含轮播点功能，但提供了扩展可能性，允许用户根据需求自行添加。

摘要由CSDN通过智能技术生成

目前该swiper组件未设轮播点，可自行添加轮播点

<template>
	<div class="swiper-container" @mouseenter="stopSiwper" @mouseleave="autoRunSwiper">
		
		<div 
		class="swiper-item" v-for="(item,index) in currentList" 
		:key="index"
		ref="swiper">
			<img class="swiper-img" :src="item.url"/>
		</div>
		
		<div class="left-but" @click="toSlip('left')">&lt;</div>
		<div class="right-but" @click="toSlip('right')">&gt;</div>
	</div>
</template>

<script>

export default {
	data() {
		return{
			timer: null,
			currentIndex:0,
			currentList:[],
			imgList:[
				{id:1,url:require("../assets/swiper1.jpg")},
				{id:2,url:require("../assets/swiper2.jpg")},
				{id:3,url:require