轮播图vue怎么实现
使用 Vue 原生实现轮播图
通过 Vue 的 v-for 和动态绑定样式实现基础轮播图。核心是利用 transform: translateX 控制图片位移，结合定时器实现自动轮播。
<template>
<div class="carousel-container">
<div
class="carousel-track"
:style="{ transform: `translateX(${-currentIndex * 100}%)` }"
>
<div v-for="(item, index) in items" :key="index" class="slide">
<img :src="item.image" alt="轮播图">
</div>
</div>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
items: [
{ image: 'image1.jpg' },
{ image: 'image2.jpg' },
{ image: 'image3.jpg' }
],
timer: null
}
},
mounted() {
this.startAutoPlay()
},
methods: {
prev() {
this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length
},
next() {
this.currentIndex = (this.currentIndex + 1) % this.items.length
},
startAutoPlay() {
this.timer = setInterval(this.next, 3000)
},
stopAutoPlay() {
clearInterval(this.timer)
}
},
beforeDestroy() {
this.stopAutoPlay()
}
}
</script>
<style>
.carousel-container {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.slide {
flex: 0 0 100%;
}
</style>使用 Swiper 插件实现
Swiper 是专业的轮播图库，Vue 版本为 swiper/vue。安装后可直接使用更丰富的功能，如触摸滑动、缩略图等。
npm install swiper<template>
<swiper
:modules="modules"
:autoplay="{ delay: 2500 }"
:pagination="{ clickable: true }"
:navigation="true"
>
<swiper-slide v-for="(item, index) in items" :key="index">
<img :src="item.image" alt="轮播图">
</swiper-slide>
</swiper>
</template>
<script>
import { Autoplay, Pagination, Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
export default {
components: { Swiper, SwiperSlide },
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
items: [
{ image: 'image1.jpg' },
{ image: 'image2.jpg' },
{ image: 'image3.jpg' }
]
}
}
}
</script>
<style>
@import 'swiper/css';
@import 'swiper/css/pagination';
@import 'swiper/css/navigation';
</style>实现无限循环轮播
原生实现无限循环需克隆首尾图片，滚动时做瞬间切换处理。关键点是在滚动到克隆项时立即跳转至真实项。
methods: {
next() {
this.currentIndex++
if (this.currentIndex >= this.items.length) {
setTimeout(() => {
this.currentIndex = 0
}, 500)
}
}
}添加过渡动画
通过 Vue 的 <transition-group> 实现更复杂的动画效果，如淡入淡出。
<transition-group name="fade" tag="div" class="carousel-container">
<div v-for="(item, index) in items"
v-show="currentIndex === index"
:key="index"
class="slide">
<img :src="item.image">
</div>
</transition-group>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>响应式设计要点
轮播图需适应不同屏幕尺寸，可通过 CSS 媒体查询动态调整高度，或使用 vw 单位。
.carousel-container {
height: 30vw;
max-height: 500px;
}
@media (max-width: 768px) {
.carousel-container {
height: 50vw;
}
}
