How do you call methods in vue3-carousel

Question

Very new to using vue, I just got simple question on how I could access the API supplied by vue3-carousel according to the docs: https://ismail9k.github.io/vue3-carousel/getting-started.html

Under the API section there are a few methods supplied with the library for example I would like to use the: slideTo(index: number) method that the documentation supplied to start the carousel on second item instead of the defaulted first item.

Answer 1

To call methods on a component, assign a ref and call the method any time on or after the mounted lifecycle hook.

<template>
    <Carousel ref="carousel"></Carousel>
</template>

// Get the carousel ref
const calendar = this.$refs.carousel

// call the method
carousel.slideTo(3)

Answer 2

Instead of

const slideToBeginning = () => myCarousel.slideTo(0);

It should be

const slideToBeginning = () => myCarousel.value.slideTo(0);

Answer 3

internally, vue3-carousel uses the expose method in the composition api, which exposes properties/methods on the component instance via template refs.

<template>
   <div>
         <Carousel ref="myCarousel"></Carousel>
         <button type="button" @click="slideToBeginning">to beginning</button>
   </div>
</template>

<script>  

import { ref } from 'vue'

export default {
   setup() {
      //the name of the variable is equal to the ref value of the carousel component
      const myCarousel = ref(null);  

      // now we can use myCarsousel's exposed methods
      const slideToBeginning = () => myCarousel.slideTo(0);

      return {
          myCarousel,
          slideToBeginning 
      }
   }

</script>