Answer the question
In order to leave comments, you need to log in
How to stop autoplay on other Swiper ReactJS slides?
Hello, please tell me how to stop autoplay for other Swiper slides.
There is a slider with slides, inside each slide there is also a slider with its own slides and it has autoplay that works for all slides at once, how can I configure Swiper to display autoplay only for active slides? I will be grateful for help
<Swiper
virtual
wrapperTag='ul'
className='heroSlider'
allowTouchMove={false}
speed={600}
navigation={{
prevEl: prevRef.current,
nextEl: nextRef.current,
}}
onBeforeInit={(swiper: any) => {
swiper.params.navigation.prevEl = prevRef.current
swiper.params.navigation.nextEl = nextRef.current
}}
onSlideChangeTransitionStart={() => {
let slides = Array.from(document.querySelectorAll('.heroSlide'))
const activeSlide = slides.find((item: Element) => item.classList.contains('swiper-slide-active'))
if (activeSlide) {
const slideArr = activeSlide.getAttribute('data-href')
if (slideArr) {
setProductLink(slideArr)
}
}
}}
>
{slides.map((slide, inx) => (
<SwiperSlide key={`slide-${inx}`} className='heroSlide' tag='li' data-href={slide.path} virtualIndex={inx}>
<IntroImage>
<Swiper
wrapperTag='ul'
className='sliderImages'
effect='cube'
cubeEffect={{
slideShadows: true,
shadow: false,
}}
autoplay={{
delay: 3000,
disableOnInteraction: true,
waitForTransition: true,
}}
speed={600}
allowTouchMove
loop
loopedSlides={2}
navigation={{
nextEl: rotateRef.current,
}}
onBeforeInit={(swiper: any) => {
swiper.params.navigation.nextEl = rotateRef.current
}}
breakpoints={{
992: {
allowTouchMove: false,
autoplay: false,
},
}}
>
{slide.images.map((img, inx) => (
<SwiperSlide key={`slide-image-${inx}`} className='slideImage' tag='li'>
<img src={img} alt={`Slide ${inx}`} />
</SwiperSlide>
))}
<RotateBtn ref={rotateRef}>
<BiRotateLeft />
<span>Rotate</span>
</RotateBtn>
</Swiper>
</IntroImage>
<IntroTitle>
<Subtitle>Nike</Subtitle>
<Title>{slide.title}</Title>
<Subtitle>${slide.price}</Subtitle>
</IntroTitle>
</SwiperSlide>
))}
<SwiperControl>
<ArrowBtn ref={prevRef}>
<IoIosArrowBack />
</ArrowBtn>
<IntroBtn black to={productLink}>
Buy Now
</IntroBtn>
<ArrowBtn ref={nextRef}>
<IoIosArrowForward />
</ArrowBtn>
</SwiperControl>
</Swiper>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question