<div class="flex_row">
<div class="arrowLeft">
<img @click="arrowClick('left')" src="../../../assets/sjbig/calLeft.png" alt="">
</div>
<div class="flex1" style="margin-top:10px;">
<el-carousel indicator-position="none" trigger="click" height="16vh" ref="cardShow">
<el-carousel-item v-for="k in Math.ceil(dataList.length / 6)" :key="k">
<ul>
<li v-for="item in dataList.slice((k - 1) * 6, k * 6)" :key="item.id">
<img class="topImg" :src="item.url" :alt="item.url" />
</li>
</ul>
</el-carousel-item>
</el-carousel>
</div>
<div class="arrowRight ">
<img @click="arrowClick('right')" src="../../../assets/sjbig/calRight.png" alt="">
</div>
</div>
style
.arrowLeft,
.arrowRight {
img {
display: inline-flex;
width: auto;
height: 17vh;
}
}
.arrowLeft img {
margin-right: 5px;
}
.arrowRight img {
margin-left: 5px;
}
.el-carousel__item{
ul{display:flex;
flex-wrap:wrap;
li{width: 31%;margin: 0.5% 1%;}
}
}
.topImg {
dispaly:inline-block;
width: 100%;
height: 7vh;
}
method:
arrowClick(val) {
if (val === 'right') {
this.$refs.cardShow.next()
} else {
this.$refs.cardShow.prev()
}
},