How to hover any slide to pause in swiper

[nixjs]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/marquee-with-swiperjs-tugmz8

Bug description

I can not pause the slider when hover any element in swiper.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

8.2.2

Platform/Target and Browser Versions

Any browsers

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[wjddlsy]

I think you should remove start/stop methods in mouse enter/leave callback. Because you already turn on pauseOnMouseEnter option when init swiper. If they are removed, it will be worked like below.

However although after removing them, panels can not be stopped immediately. I don't know if this is the intended behavior.

[tresorama]

In v9 with react pauseOnMouseHover does not always works.
Sandbox.

[railsfactory-robin]

its taking time to stop, the slider will go all the way to center and stopping it, it should not be like this, it should stop immediately when user mouse hover

[tomferez]

@railsfactory-robin I found a working solution for this issue

[tresorama]

@railsfactory-robin I found a working solution for this issue

Could you share it ?

[tomferez]

Edit: found a solution, just trigger this function on a mouseover event listener:

const stopAnimation = () => { const translate = swiper.swiper.getTranslate(); swiper.swiper.translateTo(translate, 0); swiper.swiper.autoplay.pause(); };

with pauseOnMouseEnter set to true passed to the Slider instance.

[railsfactory-robin]

@tomferez thanks for your update. its working as expected but only thing is while mouse leave its not resuming. i have tried something like below

const handleMouseEnter = () => {
      const translate = swiperInstance.getTranslate();
      swiperInstance.translateTo(translate, 0);
      swiperInstance.autoplay.pause();
    };

    const handleMouseLeave = () => {
      const translate = swiperInstance.getTranslate();
      swiperInstance.translateTo(translate, translate);
      swiperInstance.autoplay.start();
    };

[railsfactory-robin]

i found this solution

const handleMouseLeave = () => {
      const translate = swiperInstance.getTranslate();
      console.log(translate, "Mouse Leave - Current Translate");
      swiperInstance.translateTo(translate, 0);
      swiperInstance.autoplay.start();
      swiperInstance.update();
      console.log("Autoplay resumed and swiper updated");
    }; 
    

[railsfactory-robin]

still im facing an issue here then translate value is changed by the update method. its resetting to 0 so we can feel a jumping effect here. is there any way to avoid it?
without update its not working, have tried with autoplay.start, resume etc..

[hqxc-sumail]

same how to solve ths problem

[hqxc-sumail]

still im facing an issue here then translate value is changed by the update method. its resetting to 0 so we can feel a jumping effect here. is there any way to avoid it? without update its not working, have tried with autoplay.start, resume etc..

https://www.youtube.com/watch?v=-tWr7TIY3YQ watch thiss