How to pause autoplay in react swiper on hover?

Question

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,
                    }}
>

Answer 1

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.

Answer 2

So I found a work around hope it helps those who are still facing this issue. Just give a ref to your swpier use onMouseEnter and onMouseLeave on your parent div

import {useRef} from "react";

    const swiperRefLocal = useRef()

    const handleMouseEnter = () => {
        swiperRefLocal?.current?.swiper?.autoplay?.stop()
    };

    const handleMouseLeave = () => {
        swiperRefLocal?.current?.swiper?.autoplay?.start()
    };

<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
   <Swiper
                    spaceBetween={0}
                    ref={swiperRefLocal}
                    navigation={{
                        prevEl: navigationPrevRef.current,
                        nextEl: navigationNextRef.current,
                    }}
                    autoplay={{
                        delay: 3000,
                    }}
>
</div>