BiKing/components/carousels/carousels.vue

<template>
	<view class="swiper-content">
		<swiper class="swiper-box" autoplay :interval="3000" circular @change="change">
			<swiper-item v-for="(item ,index) in BannerList" :key="index">
				<view class="swiper-item">
					<image :src="item.thumbnail" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<div class="custom-indicator">
			<span :class="['indicator' , current === index ? 'active-indicator' : '']"
				v-for="(item , index) in BannerList">
			</span>
		</div>
	</view>
</template>

<script>
	export default {
		name: "carousels",
		props: {
			BannerList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-content {
		background-color: $modules-box-bg;
		padding: 0 $pages-padding;
	}

	.swiper-box {

		.swiper-item {
			width: 100%;
			height: 280rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

	}

	.custom-indicator {

		width: 100%;
		padding-top: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		// gap: 20rpx 20rpx;

		.indicator {
			width: 10rpx;
			height: 10rpx;
			background-color: #d9d9d9;
			transform: rotate(45deg);
		}

		.indicator+.indicator {
			margin-left: 20rpx;
		}

		.active-indicator {
			background-color: #27B082;
		}
	}

	// .my-swipe {
	// 	overflow: hidden;

	// 	::v-deep .van-swipe__track {

	// 		height: 280rpx;
	// 	}

	// 	.van-swipe-item {
	// 		display: inline-block;
	// 		height: 100%;

	// 		.swipe-img {
	// 			width: 100%;
	// 			height: 100%;

	// 			::v-deep .van-image__img {
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}

	// 		;
	// 	}
	// }

	// .custom-indicator {

	// 	width: 100%;
	// 	padding-top: 15rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	flex-wrap: wrap;
	// 	gap: 20rpx 20rpx;

	// 	.indicator {
	// 		width: 10rpx;
	// 		height: 10rpx;
	// 		background-color: #d9d9d9;
	// 		transform: rotate(45deg);
	// 	}

	// 	.active-indicator {
	// 		background-color: #27B082;
	// 	}
	// }
</style>