element Carousel 走马灯一次轮播3张图片（整理）

最新推荐文章于 2024-06-19 09:34:33 发布

知秋~

最新推荐文章于 2024-06-19 09:34:33 发布

阅读量1.1w

点赞数 12

文章标签：走马灯一次轮播3张图片 Carousel 走马灯一次轮播多张图片

本文链接：https://blog.csdn.net/qq_38881495/article/details/125455599

版权

本文介绍了如何使用 Vue.js 构建一个滑动轮播组件，包括设置不循环播放、自动播放等特性，并对样式进行了详细定制，如图片尺寸、标题显示等。同时，通过数据处理将图片以指定数量每组展示，以适应不同屏幕布局。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

<template>
	<div class="carouselBox">
		<el-carousel :loop="false" :autoplay="false" class="carousel">
			<el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
				<div v-for="(imgList,index1) in list" :key="index1" class="divSrc">
					<img class="img" :src="imgList.img" />
					<div class="title">{{imgList.title}}</div>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	data() {
		return{
			dataList: [],
		},
		mounted(){
			this.byEvents();
		},
		methods: {
			byEvents() {
				this.dataList = [{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					
				]
				
				let newDataList = [];
				let current = 0
				if (this.dataList && this.dataList.length > 0) {
					for (let i = 0; i <= this.dataList.length - 1; i++) {
						if (i % 3 !== 0 || i === 0) {	//数据处理成几张展示
							if (!newDataList[current]) {
								newDataList.push([this.dataList[i]])
							} else {
								newDataList[current].push(this.dataList[i])
							}
						} else {
							current++
							newDataList.push([this.dataList[i]])
						}
					}
				}
				this.dataList = [...newDataList]

			},
			
			
		}
	}
</script>
<style lang="scss" scoped>
	.carouselBox {
		margin: 0 auto;
		width: 1300px;
		height: 420px;
		background-color: #2276F5;
		.carousel{
			width: 100%;
			height: 420px;
			.el-car-item {
				width: 100%;
				height: 420px;
				display: flex;
				.divSrc{
					width: 403px;
					height: 420px;
					background: #fff;
					margin-right: 46px;
					.img {
						width: 403px;
						height: 335px;
					}
					.title{
						width: 90%;
						height: 80px;
						line-height: 80px;
						margin: 0 auto;
						text-align: center;
						font-size: 20px;
						font-weight: bold;
						color: #222222;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				
			}
			/deep/.el-carousel__arrow{
				background: red !important;
				display: block !important;
				margin-top: 65px;
			}
			
			
		}
		.el-car-item {
			width: 100%;
			display: flex;

			.img {
				width: 284px;
				height: 184px;
				margin-right: 20px;
				cursor: pointer;
			}
		}
	}

</style>