<template>
	<view class="container">
		<swiper class="swiper" :interval="3000" :circular="true" autoplay>
			<block v-for="(group, groupIndex) in groupList" :key="groupIndex">
				<swiper-item class="swiper-group">
					<view v-for="(item, itemIndex) in group" :key="itemIndex" class="item">{
    
    {
    
     item }}</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				groupList: [
					['Image 1', 'Image 2', 'Image 3'],
					['Image 4', 'Image 5', 'Image 6'],
					['Image 7', 'Image 8', 'Image 9']
				],
			};
		},
		onLoad() {
    
    
			this.startAutoScroll();
		},
		methods: {
    
    
			startAutoScroll() {
    
    
				setInterval(() => {
    
    
					const swiper = uni.createSelectorQuery().select('.swiper');
					swiper.boundingClientRect((rect) => {
    
    
						if (rect) {
    
    
							const scrollLeft = rect.scrollLeft + rect.width;
							swiper.scrollBy({
    
    
								left: scrollLeft,
								behavior: 'smooth',
							});
						}
					}).exec();
				}, 3000);
			},
		},
	};
</script>

<style>
	.container {
    
    
		height: 200px;
		overflow: hidden;
	}

	.swiper {
    
    
		white-space: nowrap;
		height: 100%;
	}

	.swiper-group {
    
    
		display: inline-block;
		width: 100%;
		white-space: initial;
	}

	.item {
    
    
		height: 100%;
		width: 33.33%;
		display: inline-block;
		line-height: 200px;
		text-align: center;
		background-color: #ccc;
	}
</style>