## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Carousel

`<vara-carousel>` is a generic slider. Every element inside the paired tag becomes one slide, so it works with existing components such as `<vara-testimonial>`, feature cards, or simple markup.

## Usage

```html
<vara-carousel label="Customer stories">
  <vara-testimonial quote="First quote" author="Alex Morgan" />
  <vara-testimonial quote="Second quote" author="Sam Rivera" />
</vara-carousel>
```

## Preview

<vara-carousel label="Customer stories">
  <vara-testimonial
    quote="The team shipped the new release two weeks early, without cutting any corners."
    author="Alex Morgan"
    author_role="Head of product"
  />
  <vara-testimonial
    quote="The onboarding flow is the smoothest we have ever put in front of customers."
    author="Sam Rivera"
    author_role="Engineering manager"
  />
  <vara-testimonial
    quote="Support tickets dropped noticeably after we published the new guides."
    author="Priya Nair"
    author_role="Customer success lead"
  />
</vara-carousel>

## Props

| Prop              | Type   | Default      | Description                                       |
| ----------------- | ------ | ------------ | ------------------------------------------------- |
| `label`           | string | `"Carousel"` | Accessible region label.                          |
| `slides_per_view` | string | `"1"`        | One, two, or three slides per view at desk width. |
| `show_controls`   | string | `"true"`     | Show the previous and next buttons.               |
| `show_dots`       | string | `"true"`     | Show the slide indicator dots.                    |
| `background`      | string | `"base-100"` | Section surface.                                  |
| `container`       | string | `"lg"`       | One of: xs, sm, md, lg, xl, full.                 |
| `class`           | string | `""`         | Additional section classes.                       |

## Behavior

The track uses native scroll snapping and works with touch, trackpad, and keyboard. Controls and dots update from the scroll position, and dots only render when the carousel has more than one slide.

Slides per view above one is applied at the desk breakpoint only; on smaller screens each slide stays full width.

## Multiple slides per view

```html
<vara-carousel label="Featured articles" slides_per_view="2" show_dots="false">
  <article class="rounded-lg border border-base-400 bg-base-200 p-5">
    First article
  </article>
  <article class="rounded-lg border border-base-400 bg-base-200 p-5">
    Second article
  </article>
  <article class="rounded-lg border border-base-400 bg-base-200 p-5">
    Third article
  </article>
</vara-carousel>
```