ElementUi轮播图走马灯添加图片

2023-12-15 21:55| 来源: 网络整理| 查看: 265

ElementUi轮播图走马灯添加图片官网例子改造适用效果

官网例子

这里我们拿官网的例子作为讲解链接: 官网. 代码

{{ item }} .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } 改造适用

从官网中我们可知，要想显示图片，item循环的List中就必须要是个图片的List。因此我们在data中定义一个图片的List集合(后台传同理)。

export default { name: 'index', data(){ return { imgList: [ {id:0,idView:'./static/image/monster/dog.jpg'}, {id:1,idView:'./static/image/monster/lion.jpg'}, {id:2,idView:'./static/image/monster/snake.jpg'}, {id:3,idView:'./static/image/monster/tree.jpg'} ] }; }, methods: { } } .index{ background: #c8cfd8; width: 80%; text-align: center; margin-left: 142px; width: 80.6%; } .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }

注意：

//image中的url，当为当前项目的静态文件时，在本项目下的静态图片。 {id:0,idView:'./static/image/monster/dog.jpg'}, //为动态路径时 {id:0,idView:require("@/assets/images/fk.jpg")},

注意：跑马灯的图片尽量尺寸一致，可以通过工具将图片缩放至同一尺寸。

效果

在这里插入图片描述

【本文地址】

公司简介

联系我们