vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图)
2019-07-02 09:55
1766 查看
1.效果图如下
2.vue代码如下
<el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in item.userInfo1" :key="index"> <div class="div2"> <div> <div style="position: absolute;" v-show="item.state===0 || item.state===1"> <img @click="deleteImg(items,item)" src="../../assets/delete.png" class="deleteStyle"> </div> <img :src="items.b_img.url" class="headImgStyle"> </div> <div class="nickname"> {{items.b_nickname}} </div> </div> </el-carousel-item> </el-carousel>
3.修改的样式
.el-carousel__item.el-carousel__item--card.is-in-stage { text-align: center; } /*修改高度*/ .el-carousel__container { height: 100px; } .van-collapse-item__content { padding: 14px 0; } /*左右箭头的样式*/ button.el-carousel__arrow.el-carousel__arrow--left, button.el-carousel__arrow.el-carousel__arrow--right { font-size: 12px; height: 20px; width: 20px; background: #A099F0; }
相关文章推荐
- 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- Vue+element-ui 实现表格的分页功能示例
- vue element ui table 过滤功能实现
- 原生js实现拖动图片左右弹性切换(模仿iPhone弹性拖拽的功能)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- js实现多图左右切换功能
- vue.js + element UI实现表格、列表的拖动 推拽效果
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- js实现图片点击左右轮播
- javascript 实现图片轮播和点击切换功能
- Vue+Element UI+Lumen实现通用表格分页功能
- JS使用tween.js动画库实现轮播图并且有切换功能
- js实现点击左右按钮轮播图片效果实例
- js实现淡入淡出轮播切换功能
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- 简单的实现点击箭头图片切换的js代码
- Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
- js实现图片点击左右轮播