Using the automatic carousel of Swiper Vue.js, even after the mouse is moved in, it will still carousel on its own

[fdf-hash]

Check that this is really a bug

• I confirm

Reproduction link

---

Bug description

Using the automatic carousel of Swiper Vue.js, even after the mouse is moved in, it will still carousel on its own

Expected Behavior

Use the automatic carousel of Swiper Vue.js. After moving the mouse in, you want to stop the automatic carousel and continue with it when the mouse leaves

Actual Behavior

After the mouse is moved in, it still automatically rotates on its own

The code is as follows：

<template>
  <div class="overall-box">
    <ul class="overall-fund">
      <li v-for="(item, index) in fundList" :key="index">
        <span class="fund-label">{{ item.name }}:</span>
        <span class="fund-value">{{ item.value }}</span>
      </li>
    </ul>
    <div @mouseenter="stopAutoplay" @mouseleave="startAutoplay">
      <swiper
        direction="vertical"
        :loop="true"
        :loopAdditionalSlides="1"
        :autoplay-delay="1000"
        :autoplay="true"
        :centeredSlides="true"
        :modules="[Autoplay, EffectFade]"
        @slideChange="onSlideChange"
        ref="swiperRef"
      >
        <swiper-slide v-for="(slide, index) in slides" :key="index">
          <h2>{{ slide.title }}</h2>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Overall",
}
</script>
<script lang="ts" setup>
import {Swiper, SwiperSlide} from "swiper/vue"
import {Autoplay, EffectFade} from "swiper/modules"
import "swiper/css"
import {onMounted, ref} from "vue"
// @ts-ignore
const swiperRef = ref<Swiper | null>(null) 
// 使用ref()定义swiperRef
const fundList = $ref([
  {name: "资金总额", value: "2934.00万元"},
  {name: "占比", value: "20.32%"},
])

// const list = $ref([{ name: '农口' }, { name: '商贸文旅口' }, { name: '教育卫生口' }])

const slides = $shallowRef([
  {title: "Slide 1", content: "This is slide 1"},
  {title: "Slide 2", content: "This is slide 2"},
  {title: "Slide 3", content: "This is slide 3"},
  {title: "Slide 4", content: "This is slide 3"},
  {title: "Slide 5", content: "This is slide 3"},
])
const onSlideChange = (swiper: any) => {
  // console.log("slide change", slides[swiper.realIndex]?.title)
}

const stopAutoplay = () => {
  if (swiperRef._value) {
  console.log(swiperRef._value);
    swiperRef._value.stopAutoplay()
  }
}

const startAutoplay = () => {
  if (swiperRef._value) {
    swiperRef._value.startAutoplay()
  }
}

onMounted(() => {
  // 确保在组件挂载时初始化 swiperRef.value
  swiperRef.value = swiperRef.value || {}
})
</script>

Mouse in error:swiperRef._value.stopAutoplay is not a function

Swiper version

11.0.5

Platform/Target and Browser Versions

window,Chrome is already the latest version Version 120.0.6099.130 (official version) (64 bit)

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

[nolimits4web]

Do you want to ask a question? Are you looking for support? Stack Overflow or Swiper Discussions is the best places for getting support

Please, don't use GitHub issues for questions