修改el-carousel左右按钮
时间: 2023-11-07 21:55:20 浏览: 98
图片轮换左右按钮
根提供的引用内容,您可以通过修改el-carousel的左右按钮来实现。在el-carousel组件中,可以设置arrow属性为never来隐藏原有的左右按钮,然后自己添加自定义按钮,并在点击事件中调用next()或prev()方法来实现切换卡片的功能。
以下是一个示例代码,供您参考:
```html
<el-carousel :autoplay="false" height="72px" arrow="never" indicator-position="none" ref="cardShow">
<el-carousel-item v-for="itemPage in pageLength" :key="itemPage">
<el-row>
<el-col :span="4" v-for="(item, index) in list" :key="index">
<img :src="item.carImg" style="width: 70px; height: 40px"/>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
<div class="customArrow">
<img src="@/assets/img/survey/boardItem/left.png" @click="arrowClick('left')" />
<img src="@/assets/img/survey/boardItem/right.png" @click="arrowClick('right')" />
</div>
```
在上面的代码中,我们隐藏了el-carousel的默认按钮,并添加了自定义按钮。在点击事件中,调用arrowClick方法,根据传入的参数调用next()或prev()方法来切换卡片。
```javascript
arrowClick(val) {
if (val === 'right') {
this.$refs.cardShow.next();
} else {
this.$refs.cardShow.prev();
}
}
```
阅读全文