Data

To use the data values, add a reference to the carousel element and then get the values from the data property.

Example:

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

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

// Data can be accessed under data property
if (myCarousel.currentSlide === 10) {
  // Do your magic here
}
....

Available Exposed data

Data	Description
currentSlide	current slide index
activeSlide	current slide index even while dragging
isSliding	if the slider is dragging
isVertical	if the slider is vertical
isNative	if the carousel runs in native CSS mode (nativeCss and browser support)
nav	An object of navigation methods
config	the current carousel configuration
maxSlide	maximum slide index
minSlide	minimum slide index
slideSize	single slide width or height
slidesCount	slides total count
slides	an array of Slides component
viewport	the viewport element
visibleRange	an object with {min, max} properties min being the lowest visible slide index and max the highest
allSlidesFit	true when every slide (plus the leading edgeSpacing) fits in the viewport without wrapAround; always false with wrapAround, with no slides, with slideEffect: 'fade' and more than one slide, and in 'auto' mode before the viewport is measured
isLocked	true while disableWhenSlidesFit is on and allSlidesFit holds; Navigation and Pagination render nothing