mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 15:31:46 +01:00
37
docs/components/content/examples/CarouselExampleAutoplay.vue
Normal file
37
docs/components/content/examples/CarouselExampleAutoplay.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
const items = [
|
||||
'https://picsum.photos/1920/1080?random=1',
|
||||
'https://picsum.photos/1920/1080?random=2',
|
||||
'https://picsum.photos/1920/1080?random=3',
|
||||
'https://picsum.photos/1920/1080?random=4',
|
||||
'https://picsum.photos/1920/1080?random=5',
|
||||
'https://picsum.photos/1920/1080?random=6'
|
||||
]
|
||||
|
||||
const carouselRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
if (!carouselRef.value) return
|
||||
|
||||
if (carouselRef.value.page === carouselRef.value.pages) {
|
||||
return carouselRef.value.select(0)
|
||||
}
|
||||
|
||||
carouselRef.value.next()
|
||||
}, 3000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel
|
||||
ref="carouselRef"
|
||||
v-slot="{ item }"
|
||||
:items="items"
|
||||
:ui="{ item: 'basis-full' }"
|
||||
class="rounded-lg overflow-hidden"
|
||||
indicators
|
||||
>
|
||||
<img :src="item" class="w-full" draggable="false">
|
||||
</UCarousel>
|
||||
</template>
|
||||
Reference in New Issue
Block a user