> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/layout/carousel.md).
# Carousel
The **Carousel** block helps organize multiple content items into a smooth horizontal slider, making it ideal for product highlights, featured content, image cards, or promotional sections. It is added inside a section and holds the items that slide, so a long row can be browsed sideways instead of wrapping onto more lines or being cut short. It works best when the items are similar in shape and shoppers are happy to browse, and less well for content everyone must see, since only the first items are visible without swiping.
### How to add it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section that holds the items.
3. Click **Add block** and choose **Carousel**.
4. Turn on **Enable carousel**, then set how many items show per row on desktop and on mobile.
5. Decide whether shoppers get arrows, dots, or both.
{% endhint %}
*Result:* the items line up in a slider in the preview, showing the number of columns you set.
| Setting | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------- |
| **Inherit color scheme** | Leaves the slider in the colors of the section around it, so it does not read as a separate band on the page. |
### Carousel settings
| Setting | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Enable carousel** | Turns the items into a sideways slider instead of a fixed row. Leave it off when every item should be visible at once. |
| **Show navigation** | Adds the back and next arrows, which is the clearest signal on a desktop that there is more to the right. |
| **Show pagination** | Adds the row of dots underneath, telling shoppers how much there is and how far through it they are. |
| Items per row on desktop | How many items are visible at once on a computer screen. Fewer, larger items suit picture led content, more suit compact cards. |
| **Items per row on mobile** | The same count on phones. Showing a sliver of the next item is what tells shoppers the row can be swiped. |
### Spacing
| Setting | Description |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top** | Adds space above the slider so it does not sit tight under the heading that introduces it. Accepts 0px to 100px. |
| **Bottom** | Leaves space under the slider, and under its dots, before the next block. Accepts 0px to 100px. |
### What changes on the storefront
* Items are browsed sideways rather than filling the page, so a long row costs the same height as a short one.
* Only the items in the visible columns are seen without interaction, which means the first one or two carry most of the attention.
* Arrows and dots are what tell shoppers there is more to see. With neither turned on, a slider can be mistaken for a plain row.
### Related pages
* [Group](/velare/customize-your-pages/layout/group.md): the container used to build each item in the slider
* [Image](/velare/customize-your-pages/basic/image.md): the picture blocks that usually make up the items
* [Layout](/velare/customize-your-pages/layout.md): the other blocks in this group
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/layout/carousel.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.