как показать несколько карточек в карусели

#vuetify.js

#vuetify.js

Вопрос:

Может ли кто-нибудь мне помочь…Я хочу показать карты в карусели.В первом карусели я хочу, чтобы были показаны три карты, а во втором карусели я хочу показать только две карты. моя проблема в том, что в первом carousal и втором carousal отображаются общие карты..

 <v-flex>
  <v-carousel hide-delimiters style="box-shadow: 0px 0px" prev-icon>
    <v-carousel-item v-for="i in 2" :key="i">
      <v-layout row>
        <v-flex sm4 v-for="j in color" :key="j" pl-2 pr-2>
          <v-card :color="j">
            <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>
  <script>
export default{
  data(){
    return{
      color: ['red','orange','green','primary','error']
    }
    }
    }
    </script
 

Ответ №1:

Проверьте этот codesandbox, который я сделал: https://codesandbox.io/s/stack-70202529-v4251?file=/src/components/CarouselExample.vue

Я предполагаю, что это потому, что вы пытаетесь сгенерировать v-carousel-item с помощью a v-for . Вы хотите сгенерировать v-card's динамическую карту? Если да, то вы получите текст из массива? Если на карточках будет статический текст, вы можете просто создать каждый элемент карусели вручную.

Предварительный просмотр карусели