How to Create and Style a Carousel
- 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.
- 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
- 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
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:
- For the words Next and Previous:
- For the dots' container at the bottom:
- For each of the dots + text:
- For the selected dot:
- 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: