# 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              |

## Layout

The carousel is sized by its container, so make sure the container can shrink. `.carousel` already sets `min-width: 0`, which lets it shrink when it is a flex or grid item. In a grid column that is all it needs. In a flex row its flex basis is still the width of all its slides, so also give it `flex: 1`; otherwise it claims most of the row and squeezes its siblings. If you wrap it in your own element that is the flex or grid item, give that wrapper `min-width: 0` (flex and grid items default to `min-width: auto`, which prevents shrinking below the slides' content):

```css
.two-columns-grid {
  display: grid;
  grid-template-columns: 1fr 250px;
}

.two-columns-flex {
  display: flex;
}

.two-columns-flex .carousel {
  flex: 1;
}

.carousel-wrapper {
  min-width: 0;
}
```

For more information about configuration options, see the [Configuration documentation](https://vue3-carousel.ismail9k.com/config.md).