一效果图

需求是我自己要自定义左右切换的箭头图片，每个页面里面显示6组数据。

二上代码

:autoplay="false" 不需要自动轮播

arrow="never" 不需要自带的箭头

indicator-position="none" 不需要底部的指示器

重点在于 ref=“cardShow”调用方法

<div class="leftArrow"><img src="@/assets/img/survey/boardItem/left.png" v-if="currentPage" @click="arrowClick('left')" /></div><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"/><!-- <div> {{ item.carName +  itemPage }} </div>  --></el-col></el-row></el-carousel-item>
</el-carousel><div class="rightArrow"><img src="@/assets/img/survey/boardItem/right.png" @click="arrowClick('right')" v-if="pageLength !== currentPage + 1"/></div>

arrowClick(val) {if(val === 'right') {this.$refs.cardShow.next()} else {this.$refs.cardShow.prev()}},

上面有个pageLength方法，就是需要前端自己处理一下分页，比如6条一页前端自己处理一下分页。

flex布局处理

具体可以参考我这篇文章https://blog.csdn.net/sunnyboysix/article/details/105946134有前端自己处理分页方法，自己处理一下数据结构就ok了。

加油加油加油

ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换相关推荐

(Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题
Ⅰ.Element-ui 提供的组件与想要目标情况的对比: 1.Element-ui 提供组件情况: 其一.Element-ui 自提供的代码情况为(示例的代码,例子如下): // Element-u ...
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码 <template><el-carousel ...
element走马灯自动_Element Carousel 走马灯的具体实现
本文来源于Element官方文档: 基础用法普通走马灯默认 Hover 指示器触发 {{ item }} Click 指示器触发 {{ item }} 组件- 走马灯基础用法默认 Hover ...
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框与 Carousel 走马灯组件实现前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...
vue+element之carousel走马灯的使用（The use of vue+element carousel）
2022.10.13 大家好,今天我使用了vue+element实现走马灯的效果,类似于轮播图,可以进行一个图片的滑动. Hello, everyone. Today, I used vue+elem ...
Vue ElementUI el-carousel 走马灯指示灯样式修改
Carousel 走马灯一.原始样式二.修改后三.代码 <template><div><el-carousel height="250px" & ...
【AS3代码】隐藏原有鼠标箭头，并自定义鼠标小箭头
package { import flash.display.Sprite; import flash.events.Event; import flash.ui.Mouse; ...
自定义EL函数、自定义JSTL标签
自定义EL函数 1.做一个类(静态) package com.maya.el;public class ELBiaoDaoShi {public static String TiHuan(String ...
[转]EL函数、自定义EL函数、自定义标签
EL函数 1.EL函数的作用:操作字符串 2.在JSP页面中要引入EL函数库 <%@ taglib prefix="fn" uri="http://java.sun ...
自定义EL函数解决JSTL标签不足之处——按字节长度截取字符串
题外话:做过大型网站前台的Web开发程序员最头疼的事情就是前台首页的布局,这其中最最头疼的就是标题字符的截取的问题,虽然有fn:substring,但表现率以及对中文的支持均不够完善,其实最终还是归结 ...

ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换

一效果图

二上代码

ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换相关推荐

最新文章

热门文章

ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换

一 效果图

二 上代码

ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换相关推荐

最新文章

热门文章

一效果图

二上代码