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

  • 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.

  • 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

Last updated