How to pause autoplay in react swiper on hover?

user_16124248 0
Viewed 162

I'm trying to figure out how can i pause autoplay on swiper when i hover but i cannot find it anywhere

<Swiper
                    spaceBetween={0}
                    navigation={{
                        prevEl: navigationPrevRef.current,
                        nextEl: navigationNextRef.current,
                    }}
                    autoplay={{
                        delay: 3000,
                        pauseOnMouseEnter: true,
                    }}
>
reactjs javascript
1 Answers

In this case, all you should need is the pauseOnMouseEnter attribute set to true, like you have. The issue seems to be because you don't have the autoplay module connected.

You should have imported these:

import { Autoplay, Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'

Now that Autoplay has been imported, we need connect it to the individual Swiper:

<Swiper
  // spaceBetween can be removed if you have it set to 0
  // spaceBetween={0}
  navigation={{
    prevEl: navigationPrevRef.current,
    nextEl: navigationNextRef.current,
  }}
  autoplay={{
    disableOnInteraction: false, // Optional, but recommended
    delay: 3000
    pauseOnMouseEnter: true,
  }}
  modules={[ Autoplay, Navigation ]}
>

I hope that helps. Swiper can be a headache. Their documentation is very in depth.

user_148027310
Related