《VUE》走马灯组件

最新推荐文章于 2025-03-26 15:28:30 发布

一首弦曲献仙音

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量795

点赞数

分类专栏： VUE 文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/qq_42660374/article/details/132855320

版权

<template>
  <!-- 走马灯 -->
  <div class="box">
    <div class="carousel">
      <div class="item" v-for="(v,i) in list" :key="i" @click="open(v)">
        <img :src="v.img" alt="">
        <!-- 走马灯图中自定义内容 -->
        <slot :current="current"></slot>
      </div>
    </div>
    <div class="indicator" v-if="isIndicator">
      <span :class="{'active': current == i}" v-for="(v,i) in list" :key="i" @click="indicatorCheck(i)"></span>
    </div>
    <template v-if="isArrow">
      <div class="arrow_left" @click="arrowNext(1)"></div>
      <div class="arrow_right" @click="arrowNext(2)"