next.js 可以通过编程方式禁用和启用autoPlay SwipperJS吗?

wrrgggsh  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(185)

所以我有多个不同长度的数组。我想在swiper中显示它。如果数组中的项目数大于5,是否可以在swiper中启用自动播放,如果小于5,是否可以禁用自动播放?

ttisahbt

ttisahbt1#

是的,有可能。你有两个选择。
第一个选项是有条件地呈现Swiper组件,如下所示:

if(myArray.length > 5) {
  return (
   <Swiper
      spaceBetween={50}
      slidesPerView={3}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
   >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
   </Swiper>
  );
} else {
  return (
   <Swiper
      spaceBetween={50}
      slidesPerView={3}
   >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
   </Swiper>
  );
}

第二种方法是在默认情况下启用它,然后使用stop方法停止它,如下所示(您可以查看示例here):

const swiperRef = useRef();
useEffect(() => {
  if(swiperRef.current && myArray.length < 5) {
    swiperRef.current.swiper.autoplay.stop();
  }
}, [myArray]);

return (
 <Swiper
    ref={swiperRef}
    spaceBetween={50}
    slidesPerView={3}
    autoplay={{
      delay: 2500,
      disableOnInteraction: false,
    }}
 >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    ...
 </Swiper>
);

相关问题