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

最新推荐文章于 2025-06-26 15:16:52 发布

qinyong^_^

最新推荐文章于 2025-06-26 15:16:52 发布

阅读量5.4w

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qinyongqaq/article/details/80817628

本文介绍如何在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关闭自动轮播