用于 Vuetify 的多线卡轮播卡

【问题标题】：Multi line card carousel card for Vuetify用于 Vuetify 的多线卡轮播卡
【发布时间】：2019-10-12 19:18:13
【问题描述】：

如何在 Vuetify 中实现类似于 Demo 的旋转木马内的多卡

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

我想每张幻灯片显示 6 张卡片，3 列和 2 行。或者是否有可用的插件

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你需要两个“v-for”，第一个限制为 2，第二个限制为 6。如果你想要 2 行，请查看 vuetify 官方文档grid system documentation

试试这个，没有你例子的风格

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

【讨论】：