由于开发需要,使用到了轮播图,特此记录!轮播图手动切换使用了按钮!
效果:
代码:
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();
}
},
}