injection "swiper" not found. With useSwiper()

[Jonas949]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://stackblitz.com/edit/vitejs-vite-d4cq6o?file=src/App.vue

Bug description

I want to control the slide with a new button

so i use this hook useSwiper from https://swiperjs.com/vue#use-swiper

the vue tip warn injection "swiper" not found.

Get undefined！

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.0.5

Platform/Target and Browser Versions

windows11 chrome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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

[OliveLeb]

I believe useSwiper can be used within a component which is inside the Swiper element slot

[songziman]

Depending on your needs, you need to write a button component and import userwiper within the component

[ZongYan30]

I meet the same problems.please tell me have you deal with it?

[Jonas949]

I meet the same problems.please tell me have you deal with it?

Use ref

[baijunjie]

same problems

[Jeanp78]

I made a new component with the button using the useSwiper() hook and used that component inside the Swiper component

It works for me

https://github.com/nolimits4web/swiper/assets/119700496/dd7eeec8-4ad5-4e9c-a948-4082314e4795

[Bukunmikuti]

All you have to do is to add the custom button (that uses swiper.slideNext) inside the component. You could either insert before the first or after the last swiper-slide component

[Jeanp78]

All you have to do is to add the custom button (that uses swiper.slideNext) inside the component. You could either insert before the first or after the last swiper-slide component

It only works if you make a new component and there you use the useSwiper()

This works

This does not works

[evinguoxx]

component outside of swiper： <swiper @init="(swiper)=>$swiper = swiper"> ... </swiper> https://swiperjs.com/swiper-api#event-init use init function save swiper,after you can use swiper api on you need

component inside of swiper: https://swiperjs.com/vue#useswiper

[jxlagbh360]

you can use it as this to slove this problem.

[mzh0922]

I meet the same problems.please tell me have you deal with it?

Use ref

use ref , it dosen't work, please show the code

[mzh0922]

<template>
   <swiper  @afterInit="onAfterInit">
  </swiper>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'

const mySwiperRef: Ref<null|typeof Swiper> = ref(null)

const onAfterInit = (s: typeof Swiper) => {
  mySwiperRef.value = s
 }
</script>

you can get the intance of swiper by afterInit event