手写轮播图

效果如下：

主要代码：

<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