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

最新推荐文章于 2024-08-16 11:35:31 发布

XujiRe

最新推荐文章于 2024-08-16 11:35:31 发布

阅读量820

点赞数 10

文章标签： vue.js css 前端

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

版权

本文介绍了如何在没有满意现成组件的情况下，利用Vue.js和CSS自定义开发一个叠层轮播图切换组件。该组件支持左右循环切换、自动切换，并提供回调方法获取当前轮播索引，方便进行其他操作。通过创建carouselImg.vue页面文件并引入到父组件中，配合JavaScript初始化数据，实现了一个功能完善的轮播组件。

摘要由CSDN通过智能技术生成

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
    }