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>
      <div slot="slide" class="bg-secondary">
        Slide 2
      </div>
      <div slot="slide" class="bg-tertiary">
        Slide 3
      </div>
    </q-carousel>
    
    methods: {
      myAwesomeSlideMethod (index, direction) {
        console.log(`Sliding to slide ${ index } using direction ${ direction }`)
      }
    }
    


  • Thanks alot…


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.