开发者问题收集

在 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:您需要使用 onSwiperonSlideChange 事件

步骤 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