swiper 跑马灯

.scrollLogo {
			width: 100%;
			overflow: hidden;
			margin-top: 30px;
			.swiperBox{
				margin-bottom: 30px;
				&:last-child{
					margin-bottom: 0;
				}
				.logo {
					width: clamp(111px, 16vw, 222px);
					margin: 0 10px;
					background: #fff;
					border-radius: 8px;
					transition: box-shadow 0.3s;
					object-fit: contain;
					box-shadow: 0px 4px 10px 0px rgba(1, 76, 149, 0.06);
				}
			}
			::v-deep(.swiper-slide) {
				display: flex;
				align-items: center;
				justify-content: center;
				width: auto !important;
			}
			::v-deep(.swiper-wrapper) {
				transition-timing-function: linear !important;
				align-items: center;
			}
		
		}

  

<swiper :modules="modules" :loop="true" slides-per-view="auto" :autoplay="{ delay: 0, disableOnInteraction: false,reverseDirection: true }" :space-between="10" class="swiperBox" :speed="5000" :observer="true" :observeParents="true" ref="mySwiperRef" > <swiper-slide v-for="(item, index) in 7" :key="index" class="swiper-item" > <img :src="require(`@/assets//logo/i${index + 9}.png`)" class="logo" /> </swiper-slide> <swiper-slide v-for="(item, index) in 7" :key="index" class="swiper-item" > <img :src="require(`@/assets//logo/i${index + 9}.png`)" class="logo" /> </swiper-slide> </swiper>

  

posted @ 2026-01-07 11:58  Brian_白  阅读(1)  评论(0)    收藏  举报