Infinite Loop

Advanced

Endless card swiping with a small dataset that cycles.

Demo

Source

index.vue

<script lang="ts" setup>
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'
import InfiniteCard from './InfiniteCard.vue'

const cards = ref([
  { id: 1, text: 'A', color: 'from-red-500 to-red-600' },
  { id: 2, text: 'B', color: 'from-green-500 to-green-600' },
  { id: 3, text: 'C', color: 'from-blue-500 to-blue-600' },
])
</script>

<template>
  <div class="w-full flex justify-center items-center py-12">
    <div class="w-80 h-80">
      <FlashCards :items="cards" :loop="true" #="{ item }">
        <InfiniteCard :item="item" />
      </FlashCards>
    </div>
  </div>
</template>

InfiniteCard.vue

<script setup lang="ts">
interface CardItem {
  text: string
  color: string
}

defineProps<{
  item: CardItem
}>()
</script>

<template>
  <div class="relative overflow-hidden rounded-2xl shadow-lg w-72 h-72 transform transition-all duration-300 hover:scale-105">
    <div :class="`bg-gradient-to-br ${item.color} h-full relative flex items-center justify-center`">
      <div class="absolute top-2 right-2 text-white/80">
        <div class="text-xs">
          ∞
        </div>
      </div>
      <div class="text-white text-lg font-bold">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

Key Concepts

• loop: Enable infinite cycling through cards
• @loop event: Fires when cycling back to the first card
• Perfect for: small content sets, endless browsing, practice modes

Related

• Loop Mode