效果如下:
主要代码:
<template>
<section class="container">
<p class="title">轮播图</p>
<div class="serveArea">
<div class="baseContent">
<div class="prev">
<img src="~/assets/images/solution/financeIns/prev.png" @click="arrowClick('prev')" />
</div>
<div class="carousel">
<div class="carousel">
<div class="carouselItem" v-for="(item, index) in casesList" :key="index">
<div class="caseInfo" v-show="activeItem === (index+1)">
<div class="infoContent">
<p class="casesTitle">{{item.title}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="next">
<img src="~/assets/images/solution/financeIns/next.png" @click="arrowClick('next')"/>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data(){
return{
activeItem:1,
casesList:[
{
title:'轮播图1',
},
{
title:'轮播图2',
},
{
title:'轮播图3',
},
{
title:'轮播图4',
}
]
}
},
async asyncData({$axios}){
},
created(){
},
async mounted(){
},
methods:{
arrowClick(val) {
if(val === 'next') {
this.activeItem++
if(this.activeItem > this.casesList.length){
this.activeItem = 1
}
} else {
this.activeItem--
if(this.activeItem <=0){
this.activeItem = this.casesList.length
}
}
},
}
}
</script>
样式自己写吧,最好也加一下动画,这样左滑右滑就有动效。
知道了activeItem,就可以与 指示器做关联。
如果要自动播放,就做一个定时器,两秒或三秒自动左滑或右滑。
如果需要框架的轮播图,如Element-ui
可以参考我的另外一篇文章
https://blog.csdn.net/qq_35430000/article/details/118092274?spm=1001.2014.3001.5501