Methods

To use the API methods, add a reference to the carousel element and then call methods from that reference.

Example:

<Carousel ref="myCarousel"> ... </Carousel>

import { ref } from 'vue'
const myCarousel = ref(null)

// Methods are available in this reference
myCarousel.next()
myCarousel.updateSlideSize()

next()

Slide to the next slide

prev()

Slide to the previous slide

restartCarousel()

Restart the carousel settings and data, internally it calls:

• resetAutoplay
• updateBreakpointsConfig
• updateSlidesData
• updateSlideSize

slideTo(index: number, skipTransition = false)

Slide to specific slide index. While a slide is in progress the call is ignored unless skipTransition is true, which starts the new slide anyway; the flag does not disable the CSS transition.

updateBreakpointsConfig()

Update the current carousel config based on breakpoints settings and screen width

updateSlideSize()

Update slideSize value based on itemsToShow, dir and the current carousel width/height

updateSlidesData()

Update all the slide related date includes:

• currentSlideIndex
• maxSlide
• middleSlide
• minSlide