在 Swiperjs 中设置自动播放的持续时间
2022-10-08
4769
我正在 React 中制作一个启用了自动播放的幻灯片组件。我希望自动播放在 5 秒后停止。有什么办法吗?
这是我的代码
import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'
export const SliderComponent => {
<Swiper
direction={"vertical"}
className="mySwiper"
speed={100}
autoplay={{
delay: 10,
disableOnInteraction: false,
}}
modules={[Autoplay]}
>
{logos.map(logo=>{
return (<SwiperSlide key={logo.id}>
<img src={logo.img} alt="logos" className='object-contain w-full' />
</SwiperSlide>)
})}
</Swiper>
}
我试图制作一个像老虎机一样的动画,在 5 秒后停止。
2个回答
此答案适用于如果您想在 n 次移动后暂停幻灯片一段时间的情况。我将写另一个答案,用于在 n 秒后停止自动播放。
步骤 1:您需要使用
onSlideChange
事件
步骤 1:您需要一个状态
count
,它将跟踪每次幻灯片更改时更改了多少张幻灯片。
步骤 2:当计数为 5 时,您需要重置
count
状态,并且必须停止自动播放。并且需要使用
setTimeout
,5 秒后自动播放将再次开始。
import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'
export const SliderComponent => {
const [count, setCount] = useState(1);
<Swiper
direction={"vertical"}
className="mySwiper"
speed={100}
autoplay={{
delay: 10,
disableOnInteraction: false,
}}
onSlideChange={(swiper) => {
if (count === 5) {
setCount(1);
swiper.autoplay.stop();
setTimeout(() => {
swiper.autoplay.start();
}, 5000);
} else {
setCount((prev) => prev + 1);
}
}}
modules={[Autoplay]}
>
{logos.map(logo=>{
return (<SwiperSlide key={logo.id}>
<img src={logo.img} alt="logos" className='object-contain w-full' />
</SwiperSlide>)
})}
</Swiper>
}
Asif Jalil
2022-10-08
如果要在 5 秒后停止计时,则需要按照以下步骤操作 -
步骤 1:您需要使用
onSwiper
和
onSlideChange
事件
步骤 2:您需要在 swiper 初始化时跟踪时间。
步骤 3:每次幻灯片切换时,您都必须根据初始化时间检查时间是否超过 5 秒。如果是,则停止自动播放。
import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'
export const SliderComponent => {
const [count, setCount] = useState(1);
<Swiper
direction={"vertical"}
className="mySwiper"
speed={100}
autoplay={{
delay: 10,
disableOnInteraction: false,
}}
onSlideChange={(swiper) => {
const time = Date.now();
if (time > startTime + 5000) {
swiper.autoplay.stop();
}
}}
onSwiper={() => setStartTime(Date.now())}
modules={[Autoplay]}
>
{logos.map(logo=>{
return (<SwiperSlide key={logo.id}>
<img src={logo.img} alt="logos" className='object-contain w-full' />
</SwiperSlide>)
})}
</Swiper>
}
Asif Jalil
2022-10-08