如何在一张幻灯片中针对特定条件禁用 swiper 上的自动播放？

Question

我在幻灯片上有一个表单，单击同一张幻灯片中的按钮会打开。但是当启用自动播放时，滑动器会转到下一张幻灯片。我希望在用户单击表单打开按钮时禁用自动播放。 表格在 index=1 中。

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

// Styles must use direct files imports
import "swiper/swiper.scss"; // core Swiper
import "swiper/modules/navigation/navigation.scss"; // Navigation module
import "swiper/modules/pagination/pagination.scss";
import "swiper/modules/autoplay/autoplay.scss";
import "swiper/modules/effect-fade/effect-fade.scss";

// Import Swiper styles
import "swiper/swiper-bundle.min.css";

import SwiperCore, { EffectFade, Autoplay, Navigation } from "swiper";

import "./Header.css";
// SwiperCore.use([EffectFade, Navigation, Autoplay, Pagination]);
function Carouselgal() {
  const [play, setplay] = useState(true);
  const [duration, setduration] = useState(3000);

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

  return (
    <>
    
      <Swiper
        autoplay={{ delay: duration, disableOnInteraction: false }}
        navigation={true}
        loop={true}
        className="home__carousel"
        effect="fade"
      >
        <SwiperSlide>
          <Hero1 play={setplay} />
        </SwiperSlide>
        <SwiperSlide data-swiper-autoplay="10000">
          <Hero2 />
        </SwiperSlide>
        <SwiperSlide>
          <Hero3 />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default Carouselgal;```

Answer 1

您可以省略自动播放选项。