From ee0a8f01af1cbfb04bd27b22dc0f79daadda8913 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 7 Feb 2024 21:31:48 +0100
Subject: [PATCH] docs(carousel): improve examples

---
 .../examples/CarouselExampleSlotsDefault.vue     | 16 +++++++---------
 .../examples/CarouselExampleSlotsIndicator.vue   |  4 ++--
 .../examples/CarouselExampleSlotsPrevNext.vue    |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/components/content/examples/CarouselExampleSlotsDefault.vue b/docs/components/content/examples/CarouselExampleSlotsDefault.vue
index c4d99601..f5c3be58 100644
--- a/docs/components/content/examples/CarouselExampleSlotsDefault.vue
+++ b/docs/components/content/examples/CarouselExampleSlotsDefault.vue
@@ -19,15 +19,13 @@ const items = [{
 </script>
 
 <template>
-  <UCarousel :items="items" :ui="{ item: 'w-full' }">
-    <template #default="{ item, index }">
-      <div class="text-center mx-auto">
-        <img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
+  <UCarousel v-slot="{ item, index }" :items="items" :ui="{ item: 'w-full' }">
+    <div class="text-center mx-auto">
+      <img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
 
-        <p class="font-semibold">
-          {{ index + 1 }}. {{ item.name }}
-        </p>
-      </div>
-    </template>
+      <p class="font-semibold">
+        {{ index + 1 }}. {{ item.name }}
+      </p>
+    </div>
   </UCarousel>
 </template>
diff --git a/docs/components/content/examples/CarouselExampleSlotsIndicator.vue b/docs/components/content/examples/CarouselExampleSlotsIndicator.vue
index 6eede050..9c94be1f 100644
--- a/docs/components/content/examples/CarouselExampleSlotsIndicator.vue
+++ b/docs/components/content/examples/CarouselExampleSlotsIndicator.vue
@@ -26,8 +26,8 @@ const items = [
       <img :src="item" class="w-full" draggable="false">
     </template>
 
-    <template #indicator="{ onClick, index, active }">
-      <UButton :label="String(index)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(index)" />
+    <template #indicator="{ onClick, page, active }">
+      <UButton :label="String(page)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(page)" />
     </template>
   </UCarousel>
 </template>
diff --git a/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue b/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
index 2ba2180c..a74170b2 100644
--- a/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
+++ b/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
@@ -30,7 +30,7 @@ const items = [
     </template>
 
     <template #next="{ onClick, disabled }">
-      <button :disabled="disabled" class="" @click="onClick">
+      <button :disabled="disabled" @click="onClick">
         Next
       </button>
     </template>