美文网首页
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