Image carousel

The carousel displays your images one at a time, in a fixed-format frame, with automatic scrolling. Each slide can have a title, text and a link, for a smooth and dynamic presentation.

Adding a carousel to the page

1. In the palette, under Media, drag the “Carousel” card onto your page.
2. In the inspector, click “Edit photos” to import your images: each image is placed on a slide.
3. Organize your slides by drag and drop (add, delete, reorder).

Customizing slides

Each slide is configured individually, in the “Slides” tab:

• Slide background image: choose the image, or replace it with “Change image”.
• Slide title and text: they are displayed in a text block placed over the image.
• Link associated with the slide: clicking the slide opens this link.
• Widget associated with the slide: displays a page widget on top of the slide.

General properties

The following settings apply to all slides, in the “General properties” tab:

• Carousel format: the ratio between the width and height of the frame, or a fixed height.
• Display time for each slide: from 1 to 15 seconds.
• Transition type: slide by slide, fade, or fade with KenBurns effect (a slow zoom on the image).
• Automatic scrolling: on page load, or disabled.
• Control arrows: show or hide them, and set their size and colors.
• Overlay a color on the background image: a color tint over the images, useful for text readability.
• Carousel image display mode: “Fill” covers the entire frame, even if it means cropping the image; “Fit” shows the whole image.

Slide text

The “Slide text properties” tab configures the block that displays the title and text on each slide: its visibility, its position on the image, its background (color, corners, outer and inner margins), its width and height, as well as the font, color and size of the title and text.

Carousel thumbnails

The carousel can be accompanied by a row of thumbnails, configured in the “Thumbnail display” tab. They reuse the slide images and allow quick navigation:

• Visitors click a thumbnail to go directly to the corresponding slide.
• Thumbnails update automatically if you add, delete or reorder your images.
• They give better visibility of the carousel's content, especially if it contains many images.