Skip to content

Methods โ€‹

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

Example:

html
<Carousel ref="myCarousel"> ... </Carousel>
js
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

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

Released under the MIT License.