Vue + element 点击事件 修改走马灯的播放索引
需求:点击下方图片添加边框并改变走马灯播放的图片使其内容一致方法:element官方提供了setActiveItem方法<el-carousel trigger="click" height="380px" indicator-position="none" arrow="always" :initial-index="0"ref="remarkCarusel" @change="lisCh
·
需求:点击下方图片添加边框并改变走马灯播放的图片使其内容一致
方法:
element官方提供了setActiveItem方法
<el-carousel trigger="click" height="380px" indicator-position="none" arrow="always" :initial-index="0"
ref="remarkCarusel" @change="lisChange">
<el-carousel-item v-for="(item, index) in carLis" :key="index">
<el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
<div class="carShow">
<span>2020-04-08 18:08:16</span>
</div>
</el-carousel-item>
</el-carousel>
<ul>
<li v-for="(item, index) in carLis" :key="index" @click="lisChange(index)" :class="{ lisColor: isActive == index }">
<img :src="item.url" alt="" />
<div class="showCot">
<span>2020-04-08 18:08:16</span>
</div>
</li>
<div class="clear"></div>
</ul>
lisChange (index) {
this.$refs.remarkCarusel.setActiveItem(index);
this.isActive = index;
}
更多推荐
已为社区贡献9条内容
所有评论(0)