How to add many v-slide-group-item?

55 Views Asked by At

how i can add one more component in v-slide-group? I have one v-for in v-slide-group-item, but in the end i need to put another component, i try to put 2 v-slide-group-item but functional is broken in this case. Maybe someone know another methods? If i delet second v-slide-group-item all is good, but i need it too.

I try to put 2 v-slide-group-item but it dosen't work normal, i see a component on page but the problem is that when i click to first and second card this redirect at the end of the slaids

<v-slide-group show-arrows>
      <v-slide-group-item
        v-for="(card, index) in cards"
        :key="index"
      >
        <OfficesCard :card="card" class="ma-10" />
      </v-slide-group-item>

      <v-slide-group-item>
        <v-card
          class="all-offices-card"
          height="375"
          rounded="xl"
          variant="text"
          width="330"
        >
          <v-card-title class="all-offices-card__title d-flex justify-center mt-16 pt-5">
            <span class="font-weight-bold urbanist-font">{{ $t("profile.titles.all_your_offices") }}</span>
          </v-card-title>
          <v-card-actions class="d-flex justify-center mt-15 pt-10">
            <v-btn
              class="btn-box inter-font text-none font-weight-medium"
              color="white"
              rounded="xl"
              size="x-large"
              to="/profile/offices"
              variant="tonal"
            >
              <p class="font-weight-medium text-button inter-font text-none">
                {{ $t("profile.buttons.show_more") }}
              </p>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-slide-group-item>

      <template #prev="{ prev }">
        <button ref="prevBtn" @click="prev" />
      </template>
      <template #next="{ next }">
        <button ref="nextBtn" @click="next" />
      </template>
    </v-slide-group>
0

There are 0 best solutions below