有需求要做https://www.databend.com/首页类似的轮播图,大概这样,循环一圈后,第一张图片接着最后一张图片继续滚动,而不是重新定位开头滚动,然后渐变等等样式…
用的swiper组件:
"use client"
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';
import SwiperCore, { Autoplay, FreeMode } from 'swiper';
SwiperCore.use([Autoplay, FreeMode]);
export default function AutoSwiper() {
//自己的list
return (
<>
<div className="logo-carousel z-10 h-[108px] -mt-[108px]">
<div className="container mx-auto">
<Swiper
spaceBetween={69}
slidesPerView="auto"
loop={true}
autoplay={{
delay: 0,
disableOnInteraction: false,
}}
// freeMode={true}
speed={3000}
allowTouchMove={false}
className="logo-carousel-container "
>
{users.map((logo, index) => (
<SwiperSlide key={index} style={{ width: '142px' }}>
<img style={{ width: '142px', height: '46px' }} src={logo.img} alt={logo.title} />
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</>
)
}
样式部分:
.logo-carousel-container {
mask-image: linear-gradient(90deg, #0000 0, #000 12.5%, #000 87.5%, #0000)
}
.logo-carousel {
display: flex;
overflow: hidden;
opacity: .7;
width: 100%;
position: relative;
place-items: center;
background: linear-gradient(90deg, #101D86 0, #1F2683 25%, #2B2F7F 50%, #1F2683 75%, #101D86)
}
.swiper-wrapper {
display: flex;
align-items: center;
transition-timing-function: linear !important;
}
swiper组件调试了下,好像没找到那种零延迟的属性,它会像普通轮播一样卡一下,不够顺滑,加的这个属性 transition-timing-function: linear !important;就行了。