vue中的elementUI组件之轮播carousel card使用小记

本文介绍如何在Vue项目中配置并使用轮播图组件,包括设置轮播样式、加载图片资源及动态展示图文信息等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<el-row :gutter="0">
			<el-carousel :interval="0" arrow="never" height="500px" type="card">
				<el-carousel-item v-for="item in dataimg" :key="item">
					<div class="grid-content">
						<el-col :md="12" :offset="6">
							<div>
								<img :src="item.src">
								<p class="italictext">{{item.txt}}</p>
								<span class="service">{{item.txt2}}</span>
								<p class="last">{{item.txt3}}</p>
							</div>
						</el-col>
					</div>
				</el-carousel-item>
			</el-carousel>
		</el-row>

js:

export default {
		name: 'AboutUs',
		data() {
			return {
				
				dataimg: [{
						src: require('../assets/img/img01_03.png'),
						txt: '"Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '一站式服务',
						txt3: 'Miami, FL'
					},
					{
						src: require('../assets/img/img02_03.jpg'),
						txt: '"Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor."',
						txt2: '国际服务',
						txt3: 'Greensboro, NC'
					},
					{
						src: require('../assets/img/img02_05.jpg'),
						txt: '"Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna."',
						txt2: '全网渠道',
						txt3: 'Charlotte, NC'
					}
				]
			}
		}
	}

在js中写入src路径需要使用require来请求,不然无法加载图片,type=card将轮播风格设置成3D效果,for循环item in dataimg item为内容,dataimg为内容个数,也可以设置成数字,左右按钮arrow="never/always/hover" 不显示/显示/鼠标悬停;

interval设置自动轮播时间 默认为3000ms 设置为0关闭自动轮播

评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值