Events

Carousel events provide flexibility to intercept and react to navigation changes, offering greater control and customization options.

How to Use Events

<script setup>
const handleInit = () => {
  console.log('Carousel initialized')
}
const handleSlideStart = (data) => {
  console.log('Slide started:', data)
}
</script>

<template>
  <Carousel
    @init="handleInit"
    @slide-start="handleSlideStart"
  >
    ...
  </Carousel>
</template>

Event Reference

@before-init

Triggered before the carousel is initialized. Use this to perform any setup tasks required before the carousel is ready.

@drag

Triggered while the carousel is being dragged, providing live positional data. Emits the following:

• deltaX: The horizontal distance dragged.
• deltaY: The vertical distance dragged.

The deltas are the pointer's movement in screen pixels since the drag started; they are not converted for CSS-scaled ancestors, unlike the carousel's own slide movement, so divide them by the ancestor scale if you need layout pixels.

@init

Triggered once the carousel is mounted and fully initialized. This is ideal for executing post-initialization logic.

@loop

Triggered when the carousel loops over (wraps around), only in wrap-around mode. Emits the following data:

• currentSlideIndex: The current slide index before the loop occurs.
• slidingToIndex: The index of the slide the carousel loops to.

@slide-end

Triggered after the sliding animation completes and the current slide is updated. Emits the following data:

• currentSlideIndex: The updated current slide index.
• prevSlideIndex: The index of the slide before the transition.
• slidesCount: The total number of slides in the carousel.

A transition that is interrupted by another one, for example when v-model changes twice within the transition duration, emits slide-end at the moment it is interrupted. Every slide-start is therefore followed by one slide-end, unless the carousel is unmounted first.

@slide-registered

Triggered when a new slide is registered with the carousel. Emits the following data:

• index: The index position where the slide was registered
• slide: The Vue component instance of the registered slide

@slide-start

Triggered at the beginning of the sliding function. Emits the following data:

• currentSlideIndex: The current slide index before the transition starts.
• prevSlideIndex: The index of the slide before the current one.
• slidingToIndex: The index of the slide the carousel is moving to.
• slidesCount: The total number of slides in the carousel.

@slide-unregistered

Triggered when a slide is unregistered (removed) from the carousel. Emits the following data:

• index: The index position from which the slide was removed
• slide: The Vue component instance of the unregistered slide

Notes

• Events are reactive and can be used to trigger animations, analytics, or other custom behaviors.
• Registration events (slide-registered, slide-unregistered) are particularly useful for tracking slide lifecycle and managing external state.
• Ensure your event handlers account for edge cases, such as looping or rapid navigation.