How to use @slide(index, direction) in carousel

  • I am trying to figure out how to use @slide(index, direction) event in carousel component to get the index of the current slide. Also, I am trying to run a callback on swipe of every carousel item to update the state with the current carousel item index

  • Quick example:

    <q-carousel class="text-white" @slide="myAwesomeSlideMethod">
      <div slot="slide" class="bg-primary">
        Slide 1
      <div slot="slide" class="bg-secondary">
        Slide 2
      <div slot="slide" class="bg-tertiary">
        Slide 3
    methods: {
      myAwesomeSlideMethod (index, direction) {
        console.log(`Sliding to slide ${ index } using direction ${ direction }`)

  • Thanks alot…

Log in to reply