How to add custom event or method to the QCarousel ?

[JackyLee]

Hi,
I am trying to add a custom event on the image in QCarousel, by the event, I can go to a new route in the router, I try to use the QItems to wrap the Q-carousel-slide, but it doesn’t work. Please Help!

    <q-carousel
          arrows
          animated
          v-model="slide2"
          height="28vh"
          style="border-radius:20px"
          infinite
          autoplay
          class="q-mr-md"
        >
      <q-item to="/"
          <q-carousel-slide
            name="first"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          >
          </q-carousel-slide>
     </q-item>
   </q-carousel>

[s.molinari]

You can try to do something like this.

      <q-carousel-slide :name="1">
        <router-link to="/">
          <q-img 
            class="cursor-pointer"    
            src="https://cdn.quasar.dev/img/mountains.jpg">
          </q-img>
        </router-link>
      </q-carousel-slide>

[JackyLee]

@s-molinari
Great, It works, Tq,
And I try to wrapping the QCarousel by <router-link :to=" route "> </router-link>, the route should be dynamic in your data or vuex store, using v-for to loop each <q-carousel-slide>. it works also.
This usage of navigation to a route by tap an image in the carousel are quite common if QCarousel has a build-in event or method will be better.

[s.molinari]

Well, thing is, there are a million ways to customize a carousel. With Quasar, you can build it out, as other devs can too, to whatever you/ they want. QCarousel is just the basis, as it should be in a framework.

Scott

[JackyLee]

@s-molinari
Yes, less is more!