[Vuejs]-Can't use ref to select swiper methods

by

3👍

✅

From what I’m seeing in the source code, you can’t access the swiper instance using ref on the swiper vue component because it’s not exposed.

You have others way to do thought:

  • inside a child component of the <swiper> component, use the useSwiper() component.
  • on the parent component that instanciate the <swiper> component, use the @swiper event. It sends the swiper object once mounted:
<template>
 <swiper @swiper="getRef" />
</template>

<script setup>
const swiper = ref(null)
function getRef (swiperInstance) {
  swiper.value = swiperInstance
}

function next () {
  swiper.value.slideNext() // should work
}
</script>
👤Kapcash

0👍

You don’t have to use this method instead you can just import Keyboard like this:

import { Navigation } from 'swiper';

Add Keyboard to modules and attributes of <swiper> like this:

<swiper :modules="[Navigation, Keyboard]" keyboard />

And add the attribute to <swiper-slide> as well:

<swiper-slide keyboard />
👤Marnix Elling

Leave a comment