Links
🎠

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: