vuetify.js

How to make a carousel with multiple images in Vuetify?

I want to make a carousel with multiple images like this:

Multiple images carousel

It should slide a single image on arrow click.

There is a feature request, but how to make it until it is fixed?

Solution

  • I found the following workaround:

    <v-carousel>
  <v-carousel-item :key="i" v-for="i in 5">
    <v-layout row>
      <v-flex xs4 :key="j" v-for="j in 3">
        <img :src="'https://placehold.it/380x500/?text=' + i + '-' + j" alt="">
      </v-flex>
    </v-layout>
  </v-carousel-item>
</v-carousel>

    But it scrolls a group of images at once. See the demo.

    UPDATE: You can use Vue2-Siema, which is a Vue 2 wrapper for Siema - a lightweight carousel library. See the demo.