Instant pause on img hover in Swiper

45 Views Asked by At

is there any way to set instant pause autoplay loop on hover?
Currently my code look like this

<div className={css.patronsBox}>
          <Swiper
            spaceBetween={19}
            slidesPerView={2}
            breakpoints={{
              394: {
                slidesPerView: 7,
                spaceBetween: 20,
              },
            }}
            loop={true}
            autoplay={{
              delay: 0,
              reverseDirection: true,
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            }}
            speed={4000}
            pagination={{
              clickable: false,
            }}
            navigation={false}
            modules={[Autoplay]}
            allowTouchMove={false}
            className="swiperPatrons"
          >
            {patronOne.map((slider, index) => (
              <SwiperSlide key={index}>
                <img
                  className={css.patronsImg}
                  src={slider}
                  alt={`patron logo ${index + 1}`}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

the slider actually is pausing but it take too long to pause and I need to instantly pause autoplay on img hover

I've searched stack posts for any hints but none was useful so far.
I would highly appreciate any help to solve this problem

0

There are 0 best solutions below