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

2019-09-29  本文已影响0人  nora_wang

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();
      }
上一篇 下一篇

猜你喜欢

热点阅读