How to use the carousel element
In this article, you will learn how to integrate, configure, and populate the dynamic Carousel component block to display fluid sliding layouts on your pages.
What you will need:
- An active SystemeScale account.
- A landing page currently open inside the canvas page builder.
1. Adding the Carousel Element
Carousels function as interactive container sliders, maximizing workspace real estate by cycling multiple design rows horizontally.
1
Place the Slider Canvas Block
Access your page editor interface. From the structural layout choices located within the left menu panel toolbar, find the Carousel element, drag it out, and drop it directly inline onto your layout page.
2. Configuring Global Carousel Parameters
To establish behavior constraints, navigation controls, and spacing parameters for your master sliding container:
2
Launch Component Settings Side Panel
Move your cursor over the newly inserted carousel section on your canvas layout. Click directly on the gear-shaped Settings icon inside the container highlight tab to expand the layout configuration controls inside the left panel sidebar display tray.
Inside the sidebar dashboard properties menu panel, you can fine-tune these core behaviors:
- Add New Slide: Click the dedicated action link to spin up a fresh blank slide layer pane within the structural slider rotation array list.
- Content Vertical Alignment: Open the alignment property matrix selector to choose precisely how nested child elements center or stretch vertically across individual slide tracks.
- Navigation and Control Layouts: Select whether to render visual navigation directional arrows or pagination dots to visitors. You can fully customize color schemes, visibility parameters, and operational control shapes to suit your brand aesthetic.
- Padding and Margin Insets: Adjust the peripheral boundary margins and internal layout padding properties to balance block positioning with surrounding rows.
3. Adding Custom Content and Structuring Slide Layouts
Each individual slide track functions as an independent layout container panel capable of executing rich asset presentation models.
3
Initialize Local Layer Canvas
Click completely outside the boundaries of the primary carousel element to dismiss the global panel menu settings and unlock standard page element drops.
4
Populate Content Components
Select standard blocks from your left side menu (such as images, video players, header rows, or text fields), drag them directly across, and drop them into the current active slide background panel. To bundle multiple distinct blocks side-by-side on a single slide track, drop structural row and column grid sections inside the slide layer canvas first to cleanly enforce alignment parameters.
5
Edit Individual Block Properties
To fine-tune text lines or asset links inside a slide layer, click specifically on that child element block to toggle open its individual parameter settings. Once you finish editing elements inside the current view tab layer, click the Carousel button located at the absolute top of your left settings sidebar dashboard row panel to instantly jump back to the master slider root index menu.
6
Configure Subsequent Slide Tracks
From the slider list menu rows, select the next slide layer track index entry. This shifts the active canvas viewport view, enabling you to build and populate content arrays across your remaining slide segments in sequence.
π‘
Responsive Slide Sizing Continuity
For uniform sliding animations and clean transitions across mobile breakpoints, aim to scale nested layout grids similarly on each slide pane. If slide layer one relies on high padding margins, matching those structure traits on slide layer two prevents page content from layout-shifting when a contact toggles your navigation controls.
Was this article helpful?