# Work in Progress: How to Create and Style a Carousel
{% hint style="warning" %}
**Note: This page only applies to the Old Rendering Engine** - for the New Rendering engine ask a Savvy Expert for help
{% endhint %}
### Step 1: Create the component
* Create a Container Component
* On the Options Tab, set the container type to Carousel
### Step 2: Create Components Inside the Carousel Container
* The most common components to show inside a carousel are images, but you can also create more containers with text, images, and/or other components inside.
{% hint style="warning" %}
You won't be able to see the content in the Main Pane until you start styling it so don't worry about that yet.
{% endhint %}
* Make sure the "parent container" of each component is the carousel. It should look something like this (this view is from the Layers Tab on the Left Sidebar)
### Step 3: Get it Working!
* We recommend giving it a tag, something like `carousel` should work
* Set the width of the Carousel container to 100% (you can change it later if you want it to be thinner of course). You should now be able to see the carousel's content in the Main Pane
* If you need to center the components inside the carousel:
* You can usually do this by setting `margin-left` and `margin-right` to `auto`, with the measure unit set to N/A.
* In the case of images, you have to set the margins for the image part of the component, not for the whole thing.
* If that doesn't work at all in your component, you should put that component in a container inside the carousel.
### Step 4: Style Carousel Parts
* For styling these you'll need to set some custom selectors. These are the ones you may need:
* For the Next and Previous Arrows: `.slick-arrow`
* For the words Next and Previous: `.slick-next` and `.slick-prev`
* For the dots' container at the bottom: `.slick-dots`
* For each of the dots + text: `.slick-dots li`
* For the selected dot: `.slick-dots .slick-active`
* For just the dots: `.slick-dots li ::before`
* For just the text of the dots: `.slick-dots li button`
* Here's a doc on how to use custom selectors:
## How to Use Custom Selectors
---
# Agent Instructions: 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:
```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-create-and-style-a-carousel.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.