One of the slides contains a form that opens when a button is clicked within that same slide. However, due to autoplay being enabled, the swiper continues to the next slide. I need to disable autoplay when the user clicks on the form opening button. The form is located at 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";
// Ensure styles are imported directly
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;