nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions
https://swiperjs.com
MIT License
39.85k stars 9.75k forks source link

injection "swiper" not found. With useSwiper() #7215

Open Jonas949 opened 11 months ago

Jonas949 commented 11 months ago

Check that this is really a bug

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.

1701081652636 1701081685774

Get undefined!

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.0.5

Platform/Target and Browser Versions

windows11 chrome

Validations

Would you like to open a PR for this bug?

OliveLeb commented 11 months ago

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

songziman commented 11 months ago

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

ZongYan30 commented 10 months ago

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

Jonas949 commented 10 months ago

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

Use ref

baijunjie commented 5 months ago

same problems

Jeanp78 commented 4 months ago

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

It works for me

ButtonsComponent

SwiperComponent

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

Bukunmikuti commented 4 months ago

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 commented 4 months ago

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 it works

This does not works it does not works

evinguoxx commented 3 months ago

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 commented 2 months ago

QQ_1723182844762 QQ_1723182887910

QQ_1723182866632

you can use it as this to slove this problem.

mzh0922 commented 1 month ago

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 commented 1 month ago
<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