Multi line card carousel card for Vuetify

0
votes

How can I achieve the multi card inside carousel similar to this Demo in Vuetify

<v-carousel>
  <v-carousel-item
  v-for="(item,i) in items"
  :key="i"
  :src="item.src">
    <card></card> // card will be here
  </v-carousel-item>
</v-carousel>

I would like to show 6 cards per slide, 3 columns and 2 rows. Or if there are any plugins available

1
vue.jsvuetify.js

1 Answers

0
votes

You need two "v-for", the first with limit 2, second with limit 6. And if you want 2 rows look the vuetify official documentation grid system documentation

Try this, it is without style of your example

<v-flex>
  <v-carousel hide-delimiters style="box-shadow: 0px 0px">
    <v-carousel-item v-for="i in 2" :key="i">
      <v-layout row>
        <v-flex sm4 v-for="j in 6" :key="j" pl-2 pr-2>
          <v-card>
            <v-img
              src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
              aspect-ratio="0.8"
            ></v-img>
            <v-card-title primary-title>
              <div>
                <h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
                <div> Card text </div>
              </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
    </v-carousel-item>
  </v-carousel>
</v-flex>