From 5fc6312ab1e1c1958b41ec6a1835ca78453a05c7 Mon Sep 17 00:00:00 2001
From: Hung Chang <zero102x@gmail.com>
Date: Tue, 22 Apr 2025 21:44:40 +0800
Subject: [PATCH] docs(carousel): add thumbnails example (#3740)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../carousel/CarouselThumbnailsExample.vue    | 54 +++++++++++++++++++
 docs/content/3.components/carousel.md         | 13 +++++
 2 files changed, 67 insertions(+)
 create mode 100644 docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue

diff --git a/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue b/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
new file mode 100644
index 00000000..6e1f43b6
--- /dev/null
+++ b/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/640/640?random=1',
+  'https://picsum.photos/640/640?random=2',
+  'https://picsum.photos/640/640?random=3',
+  'https://picsum.photos/640/640?random=4',
+  'https://picsum.photos/640/640?random=5',
+  'https://picsum.photos/640/640?random=6'
+]
+
+const carousel = useTemplateRef('carousel')
+const activeIndex = ref(0)
+
+function onClickPrev() {
+  activeIndex.value--
+}
+function onClickNext() {
+  activeIndex.value++
+}
+
+function onSelect(index: number) {
+  activeIndex.value = index
+
+  carousel.value?.emblaApi?.scrollTo(index)
+}
+</script>
+
+<template>
+  <div class="flex-1 w-full">
+    <UCarousel
+      ref="carousel"
+      v-slot="{ item }"
+      arrows
+      :items="items"
+      :prev="{ onClick: onClickPrev }"
+      :next="{ onClick: onClickNext }"
+      class="w-full max-w-xs mx-auto"
+    >
+      <img :src="item" width="320" height="320" class="rounded-lg">
+    </UCarousel>
+
+    <div class="flex gap-1 justify-between pt-4 max-w-xs mx-auto">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="size-11 opacity-25 hover:opacity-100 transition-opacity"
+        :class="{ 'opacity-100': activeIndex === index }"
+        @click="onSelect(index)"
+      >
+        <img :src="item" width="44" height="44" class="rounded-lg">
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/3.components/carousel.md b/docs/content/3.components/carousel.md
index 459ede3d..5f54ccfb 100644
--- a/docs/content/3.components/carousel.md
+++ b/docs/content/3.components/carousel.md
@@ -229,6 +229,19 @@ class: 'p-8 px-16'
 ---
 ::
 
+## Examples
+
+### With thumbnails
+
+You can use the [`emblaApi`](#expose) function [scrollTo](https://www.embla-carousel.com/api/methods/#scrollto) to display thumbnails under the carousel that allows you to navigate to a specific slide.
+
+::component-example
+---
+name: 'carousel-thumbnails-example'
+class: 'p-8 px-16'
+---
+::
+
 ## API
 
 ### Props