官网例子

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

<template><el-carousel :interval="4000" type="card" height="200px"><!--此处注意，v-for 是一个固定的数，要想显示图片，我们就应该让item循环一个ImageList --><el-carousel-item v-for="item in 6" :key="item"><h3 class="medium">{{ item }}</h3></el-carousel-item></el-carousel>
</template><style>.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;}
</style>

改造适用

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

<template><div class="index"><!-- 跑马灯  --><div>   <el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in imgList" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel></div></div>
</template><script>
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: { }
}
</script>
<style>.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;}
</style>

注意：

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

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

效果

ElementUi轮播图走马灯添加图片相关推荐

微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
实现简单的轮播图（单张图片、多张图片）
前言刚学js没多久,这篇博客就当做记录了,以后还会完善的,希望大佬们多多指点.ps:下面出现的都是直接闪动,没有滑动效果的轮播图. 单张图片的替换原理 1.将几张图片叠在一起,通过改变" ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
修改elementUI轮播图鼠标划入轮播暂停的原生效果
修改elementUI轮播图鼠标划入轮播暂停的原生效果_Boriska1996的博客-CSDN博客_iview carousel 暂停
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
ElementUI轮播图指示器设置为图片
效果图: <template><div><main><div class="product-intro"><div class ...
Vue.js轮播图走马灯 (详解)
直接上代码: 轮播图1: html <template><div><div class="back_add"><div class=&qu ...
php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...

ElementUi轮播图走马灯添加图片

ElementUi轮播图走马灯添加图片

官网例子

改造适用

效果

ElementUi轮播图走马灯添加图片相关推荐

最新文章

热门文章