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