docs(carousel): improve thumbnails example

Resolves #4032
This commit is contained in:
Benjamin Canac
2025-05-02 11:58:55 +02:00
parent 2731011bb7
commit caa3bf9c7e

View File

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