Element revolving lantern (carousel map) custom use

Due to development needs, the carousel map is used, and it is hereby recorded! The carousel map is manually switched using a button!

Effect:

code:

autoplay="false" does not require automatic rotation

height The height of the carousel

arrow="never" does not require the built-in arrow

indicator-position="none" does not require the bottom indicator

:loop="false", stop the loop carousel

The point is that ref="cardShow" calls the method

    <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();
      }
    },
}