docs: update README and configuration documentation for clarity and consistency; add Carousel component documentation

Author: ismail9k

README.md

@@ -72,7 +72,8 @@ const carouselConfig = {
 Visit our [documentation website](https://vue3-carousel.ismail9k.com/) for detailed usage and examples:
 
 - [Getting Started](https://vue3-carousel.ismail9k.com/getting-started)
-- [Carousel Config](https://vue3-carousel.ismail9k.com/config)
+- [Carousel Configuration](https://vue3-carousel.ismail9k.com/config)
+- [Carousel Component](https://vue3-carousel.ismail9k.com/components/carousel)
 - [Slide Component](https://vue3-carousel.ismail9k.com/components/slide)
 - [Navigation Component](https://vue3-carousel.ismail9k.com/components/navigation)
 - [Pagination Component](https://vue3-carousel.ismail9k.com/components/pagination)

docs/.vitepress/config.js

@@ -24,13 +24,14 @@ module.exports = {
         text: 'Introduction',
         items: [
           { text: 'Getting Started', link: '/getting-started' },
-          { text: 'Config', link: '/config' },
+          { text: 'Configuration', link: '/config' },
           { text: 'Examples', link: '/examples' },
         ],
       },
       {
         text: 'Components',
         items: [
+          { text: 'Carousel', link: '/components/carousel' },
           { text: 'Slide', link: '/components/slide' },
           { text: 'Navigation', link: '/components/navigation' },
           { text: 'Pagination', link: '/components/pagination' },

docs/components/carousel.md

@@ -0,0 +1,80 @@
+# Carousel Component
+
+The Carousel component is the main container that manages slides, navigation, and overall carousel functionality.
+
+## Basic Usage
+
+```vue
+<template>
+  <Carousel>
+    <Slide v-for="slide in 10" :key="slide">
+      <div class="carousel__item">{{ slide }}</div>
+    </Slide>
+    
+    <template #addons>
+      <Navigation />
+      <Pagination />
+    </template>
+  </Carousel>
+</template>
+```
+
+## Slots
+
+### Default/Slides Slot
+
+Used to render the carousel items. You can use either the default slot or wrap elements in the `slides` slot.
+
+```vue
+<template>
+  <Carousel>
+    <template #slides>
+      <Slide v-for="slide in 10" :key="slide">
+        ...
+      </Slide>
+    </template>
+  </Carousel>
+</template>
+```
+
+### Addons Slot
+
+Used to add display carousel addon components such as Navigation and Pagination.
+
+```vue
+<template>
+  <Carousel>
+    ...
+    <template #addons>
+      <Navigation />
+      <Pagination />
+    </template>
+  </Carousel>
+</template>
+```
+
+## Slot Props
+
+The following props are passed to slots and can be used within them:
+
+| Name           | Type    | Description                                 |
+| -------------- | ------- | ------------------------------------------- |
+| `config`       | Object  | Configuration object with carousel settings. |
+| `currentSlide` | Number  | Index number of the current slide.          |
+| `maxSlide`     | Number  | The maximum slide index.                    |
+| `middleSlide`  | Number  | The middle slide index.                     |
+| `minSlide`     | Number  | The minimum slide index.                    |
+| `slideSize`    | Number  | The width/height of a single slide element. |
+| `slidesCount`  | Number  | The count of all slides.                    |
+
+## Styling
+
+The Carousel component provides several CSS classes that you can use for styling:
+
+| CSS Class            | Description                       |
+| -------------------- | --------------------------------- |
+| `.carousel`          | Main carousel container           |
+| `.carousel__viewport`| Carousel viewport/wrapper element |
+| `.carousel__track`   | Container for slides              |
+
+For more information about configuration options, see the [Configuration documentation](/config).