From 9f31e86f3137deec34488ce4a9fc100401b92f95 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 14:53:42 +0530
Subject: [PATCH] chore: add docs for slot props

---
 apps/www/src/content/docs/components/carousel.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 6cba268c..679b21e9 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -216,6 +216,20 @@ const stop = watch(api, (api) => {
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
 
+## Slot Props
+
+You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `<Carousel v-slot="slotProps" />` component to extend the functionality.
+
+```vue showLineNumbers {2}
+<template>
+  <Carousel v-slot="{ canScrollNext, canScrollPrev }">
+    ...
+    <CarouselPrevious v-if="canScrollPrev" />
+    <CarouselNext v-if="canScrollNext" />
+  </Carousel>
+</template>
+```
+
 ## Plugins
 
 You can use the `plugins` prop to add plugins to the carousel.