Autoplay pauseOnMouseEnter not working properly when speed was set

[eric-weya]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-autoplay-progress-forked-qjnwvh

Bug description

When use default speed, It worked(pause on mouseEnter everytime), but if speed was set, swiper will not pause(not everytime).

new Swiper(".mySwiper", {
      spaceBetween: 30,
      slidesPerView: 3,
      speed: 3000,   // not working properly
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
    });

Expected Behavior

should pause on mouseEnter everytime

Actual Behavior

not pause everytime.

Swiper version

9.4.1, 10.0.4

Platform/Target and Browser Versions

macOS Chrome 115.0

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

[3biubiu]

bandicam.2023-08-04.09-53-18-909.mp4

When the two silde switches, move the mouse in, pauseOnMouseEnter not working

[zhangxinyong12]

Have you solved it?

[3biubiu]

Have you solved it?

use mouseenter/leave

[eric-weya]

yes, i just use mouse event to control it.

[3biubiu]

is animation bug LOL

…

---Original--- From: ***@***.***> Date: Fri, Aug 25, 2023 20:13 PM To: ***@***.***>; Cc: "biu ***@***.******@***.***>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) yes, i just use mouse event to control it. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[zhangxinyong12]

When I switch the data, the animation stops

[3biubiu]

When I switch the data, the animation stops

I didn't understand your question, when mouseenter/leave use swiper.autoplay.stop()/start()

[zhangxinyong12]

When I switch the data, the animation stops

I didn't understand your question, when mouseenter/leave use swiper.autoplay.stop()/start()

I already took care of it. The dynamic length of my data is not fixed. I destroyed it and reinitialized it.

[3biubiu]

别销毁或者重置它 

…

---Original--- From: ***@***.***> Date: Mon, Aug 28, 2023 15:02 PM To: ***@***.***>; Cc: "biu ***@***.******@***.***>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) When I switch the data, the animation stops I didn't understand your question, when mouseenter/leave use swiper.autoplay.stop()/start() I already took care of it. The dynamic length of my data is not fixed. I destroyed it and reinitialized it. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[lllUnoxx]

兄弟，我也遇到同样的问题了。。。解决了吗？

[3biubiu]

手写一个鼠标事件去手动暂停，不用自带的配置

…

---Original--- From: ***@***.***> Date: Mon, Dec 18, 2023 23:01 PM To: ***@***.***>; Cc: ***@***.******@***.***>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[lllUnoxx]

手写一个鼠标事件去手动暂停，不用自带的配置
…
---Original--- From: @.> Date: Mon, Dec 18, 2023 23:01 PM To: @.>; Cc: @.@.>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

swiper对象能打印出来，但是swiper.autoplay.stop is not a function。。。

[wangyilan98]

手写一个鼠标事件去手动暂停，不用自带的配置
…
---Original--- From: @.> Date: Mon, Dec 18, 2023 23:01 PM To: _@**._>; Cc: _@.@._>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

swiper对象能打印出来，但是swiper.autoplay.stop is not a function。。。

你解决这个问题了吗

[3biubiu]

手写一个鼠标事件去手动暂停，不用自带的配置
…
---Original--- From: @.> Date: Mon, Dec 18, 2023 23:01 PM To: _@**._>; Cc: _@.@._>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

swiper对象能打印出来，但是swiper.autoplay.stop is not a function。。。

你解决这个问题了吗

看你的swiper版本以及是否正确获取实例

[wangyilan98]

手写一个鼠标事件去手动暂停，不用自带的配置
…
---Original--- From: @.> Date: Mon, Dec 18, 2023 23:01 PM To: _@**._>; Cc: _@.@._>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

swiper对象能打印出来，但是swiper.autoplay.stop is not a function。。。

你解决这个问题了吗

看你的swiper版本以及是否正确获取实例

我在swiper组件标签里写@swiper="onSwiper"；在swiper组件的上一层div中添加了 @mouseenter="handleSwiperMouseEnter"
@mouseleave="handleSwiperMouseLeave"；const swiperInstance=ref(null)
const onSwiper = (swiper)=>{
swiperInstance.value = swiper
}
const handleSwiperMouseEnter=()=>{
swiperInstance.value?.autoplay.stop();
}。打印 swiperInstance.value?.autoplay倒是有stop这些方法。但是不起作用；代码提示类型never上不存在属性autoplay

[3biubiu]

手写一个鼠标事件去手动暂停，不用自带的配置
…
---Original--- From: @.> Date: Mon, Dec 18, 2023 23:01 PM To: _@**._>; Cc: _@.@._>; Subject: Re: [nolimits4web/swiper] Autoplay pauseOnMouseEnter not workingproperly when speed was set (Issue #6896) 兄弟，我也遇到同样的问题了。。。解决了吗？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: _@_.*>

swiper对象能打印出来，但是swiper.autoplay.stop is not a function。。。

你解决这个问题了吗

看你的swiper版本以及是否正确获取实例

我在swiper组件标签里写@swiper="onSwiper"；在swiper组件的上一层div中添加了 @mouseenter="handleSwiperMouseEnter" @mouseleave="handleSwiperMouseLeave"；const swiperInstance=ref(null) const onSwiper = (swiper)=>{ swiperInstance.value = swiper } const handleSwiperMouseEnter=()=>{ swiperInstance.value?.autoplay.stop(); }。打印 swiperInstance.value?.autoplay倒是有stop这些方法。但是不起作用；代码提示类型never上不存在属性autoplay

试试通过 ref 的方式 直接获取实例组件内部的autoplay相关方法