Carousels
How to add and style carousels.
What Is A Carousel?
Carousels are UI components displaying a series of content items, such as images, text, or videos, in a cyclical manner. The content items can be navigated manually by the user or automatically at a set interval. They are a great way to show engaging content and provide some movement to a page.
Carousels can be used for a variety of purposes, including:
Showcasing Featured Content: Highlighting featured articles, products, or promotions.
Image Galleries: Displaying a collection of images in a photo gallery or portfolio.
Product Displays: Presenting multiple views or variations of a product on an e-commerce site.
Testimonial Rotations: Rotating through customer testimonials or reviews.
Customer Logos: Rotating through your customer logos to show a snapshot of your clients.
News and Updates: Cycling through recent news articles, updates, or blog posts.
Team Members: Introducing members of a team.
Location in the Parts Library: Base Parts > Display > Carousel
There are also carousel parts in Page Sections, including:
Page Sections > Meet the Team,
Page Sections > Testimonials,
Page Sections > Logos, and
Page Sections > Stats.
Adding a Carousel
Choose the carousel most closely aligned with what you need from the Parts Library.
Choose your preferred carousel variation, select the part where you’d like to add your carousel and click ‘+ add to page’.
The Components of a Carousel
A Carousel (parent) consists of two or more Carousel Items. (children). The Carousel Items group together the material that cycles, or is navigated manually. Carousel Items can include a range of other parts - whatever you want to display - such as rows and columns with content, images, cards, text, and more.
Carousels can be set to be on a cycle, meaning they cycle without the user having to manually move the content. The cycle time can be set.
Carousels can also have a row of buttons underneath, whereby the user manually clicks a button to move the carousel. Carousels can also have a left and right movement arrow so that the user can manually move the content.
Adding a Cycle
To add a cycle and cycle duration to your carousel, select the Carousel part (not the Carousel Item). You'll see the carousel property editing panel on the right.
Check the 'Cycle' checkbox. Then select Cycle Duration:
Changing Images in A Carousel
To change the images within a carousel, select the image within the first carousel item. Select 'Image' in the right property panel, and select your preferred image.
Then go to the next carousel item, and select 'Image'. Continue to replace all of the images in your carousel.
Adding a Background Image to A Carousel
More information on carousels is coming soon.
Related Information
Last updated
Was this helpful?
