Work in Progress: How to Create and Style a Carousel
Last updated
Last updated
Note: This page only applies to the Old Rendering Engine - for the New Rendering engine ask a Savvy Expert for help
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)
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: