Home  >  Q&A  >  body text

How to add href attribute to carousel items in Vuetify 2?

I'm using Vuetify 2 and need to redirect the user to a website when they click on a carousel image, each item of the carousel should link to a different website, so there needs to be multiple hrefs or something like that.

<v-carousel>
  <v-carousel-item
    src="https://th.bing.com/th/id/R.1f617f6c0e62cf22f8cc0db2d56c9b28?rik=%2fsedPErWt7A%2bIA&riu=http%3a%2f%2f2.bp.blogspot.com%2f-rhsJGYj0RFc%2fUJ8G5i3UEHI%2fAAAAAAAAABg%2fQY0NlUG7lBI%2fs1600%2fwallpaper-praia-wallpapers%2b(13).jpg&ehk=AkwUJUusgP9ImnYhvxvSQ0PSTFbjvJlKlUSeikKT%2bAQ%3d&risl=&pid=ImgRaw&r=0"
    cover></v-carousel-item>

  <v-carousel-item src="https://th.bing.com/th/id/R.5fedcc584b436fe320057461d49f3996?rik=0iHP4CUZiAaMyQ&pid=ImgRaw&r=0" cover></v-carousel-item>

  <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" cover></v-carousel-item>
</v-carousel>

I tried some properties provided in the API, but I don't know if they are written correctly or if they are valid in Vuetify 2.

P粉937769356P粉937769356420 days ago556

reply all(1)I'll reply

  • P粉776412597

    P粉7764125972023-09-17 00:09:37

    Use <a> tag to wrap each v-carousel-item.

    <a href="https://stackoverflow.com/" target="_blank">
      <v-carousel-item />
    </a>
    

    reply
    0
  • Cancelreply