> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-create-and-style-a-carousel.md).

# 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

![](/files/Y5L4z7DOh69YhDY3oM7A)

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

![](/files/bjEUeDbD6LCGJ2z5YIma)

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

<br>