Add a sliding carousel to your page and let your audience scroll horizontally through cards,
making your visuals more interactive. ➡️ In this article, we show you how to add a carousel to your page and include a few examples.
⚠️ This feature is not available for legacy plans. If you're interested in using the carousel widget, contact us here.
What is the carousel widget?
A carousel is a sliding widget that displays a rotating set of images and text. It lets your audience scroll horizontally through cards, allowing you to display multiple visuals in a limited space.
A carousel always consists of multiple cards. By default, it includes an image, title, paragraph text, and button. The complete card is clickable to guide your audience to another place — the next page, an external URL, or an overlay.
💡We've named this the carousel widget because it has a predefined layout that combines multiple elements. This is a new approach to building your page in Foleon that saves you time and improves design consistency.
-1.gif?width=688&height=344&name=Carousel%20Widget%20Help%20Center%20(1)-1.gif)
How to add a carousel
Step 1: Drag and drop
In the editor, click elements and scroll down to the widgets section. Drag and drop the carousel icon onto your page. The widget takes over a block, so it's possible to drag it between blocks.
The carousel has six cards by default that consist of:
- An image you can change
- A title to style as you see fit
- Paragraph text to style as you see fit
- A button
Step 2: Carousel settings
The carousel widget has six cards by default, but you can add and delete cards as you like. The minimum is one card, and the maximum is 15.
To manage the carousel settings, navigate to the orange bar in the top-right of the block.
Add a card by clicking the + icon. You can add up to 15 cards for your carousel.
To decide what your carousel looks like, click the settings icon in the orange bar.
You have three different options we'll go over below:
- General settings
- Spacing
- Card layout
General settings
- Space between cards — Determine how much space you want between cards.
- Card width size — Determine how wide you want your cards to be, ranging from XS to XL.
Spacing — In the spacing settings, you manage spacing for the edges of your carousel widget block.
Card layout
Here, you can decide to show or hide certain elements in the carousel.
- Show card image — Show or hide images on your carousel.
- Show card text — Show or hide text on your carousel.
- Show card button — Show or hide buttons on your carousel.
💡 Hiding the card image and setting a card background image creates an engaging carousel effect. Check out our second example below for some inspiration.
Step 3: Card settings
In addition to the carousel settings, you can control the settings on an individual card level. To do so, navigate to a card and check the blue bar.
This is where you can change the order of your cards by moving them to the left or the right.
To edit the image in your card:
You can replace the image of the card by clicking the replace button when you hover over the image.
You can also adjust the shape and size of the images on your card. Hover over your image and click the ⚙️ gear icon to navigate to image settings. Then, click general settings.
You can adjust the image ratio and scale here. This allows you to crop your image and set the size directly in Foleon.
In the image ratio settings, you can choose from the following options:
- Original - keeps the image at its original uploaded size
- Landscape - scales the image to a 3:2 aspect ratio
- Square - crops the image to a square shape
- Circle - crops the image to a circular shape
To change the size of the image, use the scale (%) slider.
💡 To ensure all images in your carousel are the same size, set both the image ratio and the scale percentage to the same settings for each image.
To edit the text in your card:
To edit either the title or paragraph text, simply click on the text field and make your changes.
⚠️ You cannot add a link in the card text. Instead, use the card settings as described below to add a link to the card or edit the link in the button.
To update a card's link:
Each card is clickable, allowing you to direct your audience to another place—for example, the next page, an external URL, or an overlay. The link applies to the entire card, so it will be clickable wherever your audience clicks, whether it’s the image, title, paragraph text, or button.
Click the settings icon, open the general settings, and edit the link.
You also have styling options, such as background, border, and shadow.
If you want a carousel with background images — as we did for the first card below — you need to take these steps:
- In the carousel settings, disable show card image.
- In the card settings, go to background and add a background image. You can set the background color overlays for the cards to gradient so that the images are a bit darker at the bottom/top to improve text legibility.
- In the card settings, increase the spacing for the bottom and top of the card. In the example below, we've set the maximum spacing of 200.
Step 4: Block settings
The block settings also might change the way your carousel looks. Changing the block to display full width will display your carousel from the edges of the screen.
💡The carousel widget can't be displayed with the full height option.
Carousel on mobile
The carousel widget is completely responsive and accessible on mobile devices. Check the mobile view mode to see what it looks like.
Three examples
Small cards (Travel Brochure example)
This example is close to the default carousel widget you drop onto your page.
To achieve the desired result, we swapped out the images, added some text for the cities with different styling, and added an arrow to the button.
Medium cards (Internal Newsletter example)
This example has the following settings to achieve the desired result:
- We removed the card image for each card (Carousel settings > Card layout > Toggle off Card image).
- Go to the card settings > background > add a background image. This will place the text and button on top of the background image.
- The background color overlays for the cards are set to gradient so that the images are a bit darker at the bottom to improve text legibility.
- Added some text for the department in a different color to make it stand out (e.g. "Data & Analytics).
Large cards (Product Catalog example)
This example has the following settings to achieve the desired result:
- Have transparent images (.PNG) so that they can "float" on top of the page horizontally. This might require you to remove the background of an image. For example, when you're showcasing a physical product or a cut-out of a portrait of a colleague.
- Set a block background. In this case, we opted for an abstract blue image.
Gallery vs. Carousel vs. Slider: Choosing the right widget
When displaying interactive content in your Doc, you can choose between the gallery, carousel, and slider widgets. Each offers a unique way to present your content, depending on your goals and layout preferences. Below is a quick comparison to help you decide which widget to use:
Gallery Widget
Use the gallery when you want to show multiple cards in a grid-like layout. This is ideal when you want all items visible at once to encourage browsing or when you want to display a larger number of visuals in a digestible way.
✅ Best for: Browsable content collections, like portfolios or product grids.
Carousel Widget
Use the carousel when you want to display a curated set of cards in a scrollable, linear experience. The carousel supports rich content per card and is great for storytelling or highlighting a sequence of ideas.
✅ Best for: Guided content journeys, product highlights, or testimonials.
Slider Widget
Use the slider when you want to create a full-width, immersive experience. Unlike the carousel, the slider is optimized for larger visuals and includes features like auto-slide, infinite loop, and pagination.
✅ Best for: Visual storytelling, splash sections, or impactful CTAs.
Related articles