【vue+css】实现叠层轮播图切换组件

XujiRe

于 2024-06-04 15:25:01 发布

阅读量676

点赞数 10

文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/XujiRe/article/details/139444075

版权

halo，小伙伴们，当我们需要开发一个自定义样式的叠层轮播图切换组件，在Ant Design或elementUI都没有满意的，我们是不是会考虑自己写一个，如下图所示的：
在这里插入图片描述
笔者这次带来的支持左右切换循环切换、自动切换，话不多说，上代码：
新建一个页面文件为carouselImg.vue，编写如下：

<template>
  <div class="carousel" ref="carousel">
    <div class="whole">
      <div class="roll-img">
        <span class="last" @click="after" v-show="showIndex">
          <a-icon type="left" />
        </span>
        <!-- 图片容器 -->
        <ul id="ul">
<!--          v-on:click="change($event)"-->
          <li
              v-for="(item, index) in bannerImgList"
              :key="index"
              :class="classes[index]"
          >
<!--            {
   {index}}-->
            <img :src="item.alarmPicData" alt="" />
          </li>
        </ul>
        <span class="next" @click="before" v-show="showIndex">
          <a-icon type="right" />
        </span>
      </div>
    </div>
  </div>
</template>


<script>
export default {
     
  props:{
     
    bannerImgList:{
     
      type:Array
    },
    autoPlay:{
     
      default: false
    }