Work in Progress: How to Create and Style a Carousel

Note: This page only applies to the Old Rendering Engine - for the New Rendering engine ask a Savvy Expert for help

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.

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.

• 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