<div class="swiper-container">
	<div class="swiper-wrapper">
		<!-- 第一组 -->
		<div class="item" v-for="item in cardList" :key="'first-'+item.id">
			<img :src="item.image" alt="" class="mb-15">
		</div>
		<!-- 第二组（用于无缝衔接） -->
		<div class="item" v-for="item in cardList" :key="'second-'+item.id">
			<img :src="item.image" alt="" class="mb-15">
		</div>
	</div>
</div>

.swiper-container {
    
    
	width: 100%;
    overflow: hidden;
    padding: 0 .4rem;
    position: relative;
}

.swiper-wrapper {
    
    
    display: flex;
    animation: scroll 30s linear infinite;
    width: fit-content; // 确保容器宽度适应内容
}

.item {
    
    
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.84rem;
    background: #FFFFFF;
    border-radius: .2rem;
    border: .1rem solid #B0B0AC;
    margin-right: .3rem;
    img{
    
    
        width: 2rem;
        height: 2rem;
    }
}
@keyframes scroll {
    
    
    0% {
    
    
        transform: translateX(0);
    }
    100% {
    
    
        transform: translateX(calc(-50%)); // 移动一半距离，确保无缝衔接
    }
}