CODEWITHSUNDEEP
javascriptreactjs
Burhan Ali
Burhan Ali

Reputation: 129

How to pause autoplay in react swiper on hover?

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

Upvotes: 7

Views: 6258

Answers (2)

Burhan Ali
Burhan Ali

Reputation: 129

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>

Upvotes: 3

andrilla
andrilla

Reputation: 721

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.

Upvotes: 6

Related Questions