# 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

![](broken-reference)

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

![](broken-reference)

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