How to add custom event or method to the QCarousel ?



  • 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>
    


  • 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>
    


  • @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.



  • 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



  • @s-molinari
    Yes, less is more!🙂


Log in to reply