arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 15:31:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(carousel): improve thumbnails example

Browse Source 
Resolves #4032
This commit is contained in:
Benjamin Canac
2025-05-02 11:58:55 +02:00
parent 2731011bb7
commit caa3bf9c7e
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
View File

@@ -17,9 +17,12 @@ function onClickPrev() {
function onClickNext() { function onClickNext() {
activeIndex.value++ activeIndex.value++
} }
function onSelect(index: number) { function onSelect(index: number) {
activeIndex.value = index activeIndex.value = index
}
function select(index: number) {
activeIndex.value = index
carousel.value?.emblaApi?.scrollTo(index) carousel.value?.emblaApi?.scrollTo(index)
} }
@@ -35,6 +38,7 @@ function onSelect(index: number) {
:prev="{ onClick: onClickPrev }" :prev="{ onClick: onClickPrev }"
:next="{ onClick: onClickNext }" :next="{ onClick: onClickNext }"
class="w-full max-w-xs mx-auto" class="w-full max-w-xs mx-auto"
@select="onSelect"
> >
<img :src="item" width="320" height="320" class="rounded-lg"> <img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel> </UCarousel>
@@ -45,7 +49,7 @@ function onSelect(index: number) {
:key="index" :key="index"
class="size-11 opacity-25 hover:opacity-100 transition-opacity" class="size-11 opacity-25 hover:opacity-100 transition-opacity"
:class="{ 'opacity-100': activeIndex === index }" :class="{ 'opacity-100': activeIndex === index }"
@click="onSelect(index)" @click="select(index)"
> >
<img :src="item" width="44" height="44" class="rounded-lg"> <img :src="item" width="44" height="44" class="rounded-lg">
</div> </div>