如何在Swiper的特定Slide满足指定条件时禁用autoplay自动播放

要控制Swiper的自动播放状态，只需获取Swiper实例后调用其自带的autoplay启停方法即可，修改后的代码如下：

import { useState, useRef } from 'react';
import Hero1 from "./Hero1/Hero1";
import Hero2 from "./Hero2/Hero2";
import Hero3 from "./Hero3/Hero3";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";

// 样式导入
import "swiper/swiper.scss";
import "swiper/modules/navigation/navigation.scss";
import "swiper/modules/pagination/pagination.scss";
import "swiper/modules/autoplay/autoplay.scss";
import "swiper/modules/effect-fade/effect-fade.scss";
import "swiper/swiper-bundle.min.css";

import SwiperCore, { EffectFade, Autoplay, Navigation } from "swiper";
import "./Header.css";

SwiperCore.use([EffectFade, Navigation, Autoplay]);

function Carouselgal() {
  const [duration, setduration] = useState(3000);
  // 声明ref存储Swiper实例
  const swiperRef = useRef(null);

  // 暂停自动播放方法
  const stopAutoplay = () => {
    if (swiperRef.current?.autoplay) {
      swiperRef.current.autoplay.stop();
    }
  };

  // 恢复自动播放方法
  const startAutoplay = () => {
    if (swiperRef.current?.autoplay) {
      swiperRef.current.autoplay.start();
    }
  };

  return (
    <>
      <Swiper
        autoplay={{ delay: duration, disableOnInteraction: false }}
        navigation={true}
        loop={true}
        className="home__carousel"
        effect="fade"
        // 获取Swiper实例存入ref
        onSwiper={(swiper) => swiperRef.current = swiper}
      >
        <SwiperSlide>
          <Hero1 />
        </SwiperSlide>
        <SwiperSlide data-swiper-autoplay="10000">
          {/* 给Hero2传递轮播控制方法 */}
          <Hero2 stopAutoplay={stopAutoplay} startAutoplay={startAutoplay} />
        </SwiperSlide>
        <SwiperSlide>
          <Hero3 />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default Carouselgal;

Hero2组件内调用逻辑 #

在Hero2组件的表单唤起按钮点击事件中调用stopAutoplay暂停轮播，表单关闭时调用startAutoplay恢复轮播即可，示例如下：

import { useState } from 'react';

function Hero2({ stopAutoplay, startAutoplay }) {
  const [showForm, setShowForm] = useState(false);

  const openFormHandle = () => {
    setShowForm(true);
    // 唤起表单时暂停轮播
    stopAutoplay();
  };

  const closeFormHandle = () => {
    setShowForm(false);
    // 关闭表单时恢复轮播
    startAutoplay();
  };

  return (
    <div className="hero2-wrap">
      <button onClick={openFormHandle}>打开表单</button>
      {showForm && (
        <div className="form-box">
          {/* 表单内容 */}
          <button onClick={closeFormHandle}>关闭表单</button>
        </div>
      )}
    </div>
  )
}
export default Hero2;

内容的提问来源于stack exchange，提问作者Saraswat Majumder