Element 走马灯(轮播图)自定义使用

由于开发需要,使用到了轮播图,特此记录!轮播图手动切换使用了按钮!

效果:

代码:

autoplay="false" 不需要自动轮播

height 轮播图高度

arrow="never" 不需要自带的箭头

indicator-position="none" 不需要底部的指示器

:loop="false",停止循环轮播

重点在于 ref=“cardShow”调用方法

    <el-carousel
      indicator-position="none"
      height="30rem"
      :autoplay="false"
      arrow="never"
      ref="cardShow"
      :loop="false"
    >
      <el-carousel-item v-for="(it, myIndex) in subject" :key="myIndex">
        <div class="questions">
         div里自定义内容
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 试题按钮 -->
    <div class="QuestionButton">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        @click="arrowClick('left')"
        >上一题</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        @click="arrowClick('right')"
        >下一题</el-button
      >
    
    </div>
  methods: {
  
    // 上一题,下一题
    arrowClick(val) {
      if (val === "right") {
        this.$refs.cardShow.next();
      } else {
        this.$refs.cardShow.prev();
      }
    },
}

猜你喜欢

转载自blog.csdn.net/m0_59023970/article/details/125151366
今日推荐