美文网首页
carousel 自定义上一张下一张切换

carousel 自定义上一张下一张切换

作者: nora_wang | 来源:发表于2019-09-29 14:46 被阅读0次

1.属性中定义需要控制切换的carousel名称: ref="carousel"
2.通过change事件监听轮播index发生改变。
(change事件获取两个参数,前一张的index值和后一张index的值)

//template
<div class="carouselBox">
          <el-carousel ref="carousel" @change="carouselChange">
            <el-carousel-item v-for="item in 3" :key="item">
              {{ item }}
            </el-carousel-item>
          </el-carousel>
          <div class="prev" @click="prev"></div>
          <div class="next" @click="next"></div>
        </div>
data(){
      return{
        autoplay: false,
        carouselIndex: 0
      }
    }

通过next() prev() 方法切换当前轮播

//methods
carouselChange(index){
        this.carouselIndex = index;
      },
      prev() {
        this.$refs.carousel.prev();
      },
      next(){
        console.log(this.$refs.carousel);
        this.$refs.carousel.next();
      }

相关文章

网友评论

      本文标题:carousel 自定义上一张下一张切换

      本文链接:https://www.haomeiwen.com/subject/onmfpctx.html