vue实现极简swiper_vue swiper 160 效果-优快云博客

本文链接：https://blog.youkuaiyun.com/hbjiankely/article/details/118369959

本文介绍了一个基于Vue的极简Swiper轮播组件实现方法。通过自定义CSS样式和JavaScript逻辑，实现了图片平滑过渡效果及左右切换按钮功能。适用于网页中需要展示多张图片或广告轮播场景。

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

极简swiper

效果图

在这里插入图片描述

HTML

<template>
		<div class="swiperModule">
			<div class="swiper_container">
				<div
					class="slide_item"
					:style="{transform: `translateX(${ 300 * (index - (activeIndex - 1)) }px) scale(${index === (activeIndex - 1) ? 1 : 0.83})`}"
					v-for="(item, index) in list" :key="index">
					<img :src="require(`../assets/images/${index + 1}.jpg`)" class="slideImg" alt="">
				</div>
			</div>
			<span class="swiperBtn leftBtn" @click="pre"> &lt; </span>
			<span class="swiperBtn rightBtn" @click="next"> &gt; </span>
		</div>
</template>

script

<script >
export default {
		name: "zh-swiper",
		data() {
				return {
					activeIndex: 1,
					directive: 0,
					list: [1, 2, 3, 4, 5, 6, 7]
				}
		},
		components: {},
		methods: {
			pre() {
				this.directive = -1;
				if (this.activeIndex >= 2) {
					this.activeIndex = this.activeIndex - 1;
				}
			},
			next() {
				this.directive = 1;
				if (this.activeIndex < this.list.length) {
					this.activeIndex = this.activeIndex + 1;
				}
			}
		}
}
</script>

css

<style >
.swiperModule {
	position: relative;
	width: 300px;
	height: 160px;
	border: 1px solid #ccc;
	margin: 0 auto;
}
.swiper_container {
	width: 300px;
	height: 160px;
	position: relative;
	overflow: hidden;
}
.slide_item {
	width: 300px;
	height: 160px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	transition: all .8s ease;
}
.slideImg {
	width: 100%;
	height: 100%;
}
.swiperBtn {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	top: 50%;
	border: 1px solid #dddddd;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
}
.leftBtn {
	left: -50px;
}
.rightBtn {
	right: -50px;
}
</style>