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
carouselshould workSet 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-leftandmargin-righttoauto, 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-arrowFor the words Next and Previous:
.slick-nextand.slick-prevFor the dots' container at the bottom:
.slick-dotsFor each of the dots + text:
.slick-dots liFor the selected dot:
.slick-dots .slick-activeFor just the dots:
.slick-dots li ::beforeFor 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