97c7417352
* feat: create new carousel component with embala-carousel * feat: create demos for the carousel component * feat: add the default carousel component to the docs * feat: add new-york styling for carousels * feat: add more examples for spacing, size and options * refactor: change ways to better pass the data to parent * feat: add examples for carousel api handling * feat: add example for using embla plugin * chore: add carousel component doc to the table of contents * feat: add focusability on carousel element * fix: update docs * chore: add docs for slot props * feat: expose api for the parent component * chore: include missing filenames * chore: update embla carousel dependency versions * chore: fix typescript error by getting the types from core package * chore: prevent duplicate classes by using class as prop * feat: use slot fallback content so user could change navigation button icons * fix: change attribute inheritance element * chore: update www package.json `scripts` update tsconfig exclude for the strict registry build * refactor: fix embla-carousel types after v8.0.0-rc18 update embla deps * chore: update @vue/tsconfig * chore: run registry * refactor: remove uneended ref * fix: dependencies for embla missing * docs: update carousel for optional plugin installation --------- Co-authored-by: sadeghbarati <sadeghbaratiwork@gmail.com> Co-authored-by: zernonia <zernonia@gmail.com>
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { watchOnce } from '@vueuse/core'
|
|
import type { CarouselApi } from '@/lib/registry/default/ui/carousel'
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
|
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
|
|
|
const api = ref<CarouselApi>()
|
|
const totalCount = ref(0)
|
|
const current = ref(0)
|
|
|
|
function setApi(val: CarouselApi) {
|
|
api.value = val
|
|
}
|
|
|
|
watchOnce(api, (api) => {
|
|
if (!api)
|
|
return
|
|
|
|
totalCount.value = api.scrollSnapList().length
|
|
current.value = api.selectedScrollSnap() + 1
|
|
|
|
api.on('select', () => {
|
|
current.value = api.selectedScrollSnap() + 1
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center space-x-2">
|
|
<Carousel class="w-full max-w-xs" @init-api="setApi">
|
|
<CarouselContent>
|
|
<CarouselItem v-for="(_, index) in 5" :key="index">
|
|
<div class="p-1">
|
|
<Card>
|
|
<CardContent class="flex aspect-square items-center justify-center p-6">
|
|
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CarouselItem>
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
|
|
<div class="py-2 text-center text-sm text-muted-foreground">
|
|
Slide {{ current }} of {{ totalCount }}
|
|
</div>
|
|
</div>
|
|
</template>
|