.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>