A
A
Alexander2021-06-22 22:20:57
React
Alexander, 2021-06-22 22:20:57

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 question

Ask a Question

731 491 924 answers to any question