Tengo un formulario en las diapositivas que se abre al hacer clic en un botón en la misma diapositiva. Pero como la reproducción automática está habilitada, el deslizador pasa a la siguiente diapositiva. Quiero que la reproducción automática se deshabilite cuando el usuario haga clic en el botón de apertura del formulario. El formulario está en 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;```