Slider

The slider element creates carousels and slideshows powered by Swiper . You can build image carousels, hero sliders, testimonial rotators, and other sliding content.

Adding a Slider

1. Open the Element Library in the editor
2. Under Utilities, drag the Slider element onto the canvas
3. The slider is created with default slides, navigation arrows, and pagination

Structure

A slider has a fixed internal structure:

• Slider — The outer container
  • Slides — The wrapper that holds all slides
    • Slide — Individual slide (add as many as you need)
  • Navigation — Previous/next arrow buttons (optional)
  • Pagination — Bullet or fraction indicators (optional)

You design each slide’s content by adding elements inside it (text, images, buttons, etc.). The slide content repeats the same layout structure but you can customize each slide individually.

Slider Settings

Select the slider element and open the Settings tab in the right panel to configure behavior:

Animation

Slides

Autoplay

Loop

Navigation and Pagination

Interaction

Managing Slides

• Add a slide — Use the “Add slide” action in the slider settings or duplicate an existing slide in the Layers panel
• Reorder slides — Drag slides in the Layers panel
• Delete a slide — Select a slide and delete it from the Layers panel

Slide Source

The slider supports three content source modes, configured in the slider settings:

Slides (Static)

The default mode. You manually add, remove, and design individual slides. Each slide can have different content.

Collection

Bind the slider to a CMS collection so each collection item generates a slide automatically. This is ideal for testimonial sliders, product carousels, team member spotlights, and any content managed through the CMS.

1. In the slider settings, switch the Source to Collection
2. Select the slide in the Layers panel and use the CMS panel to pick a collection
3. Design the slide template and bind collection fields to its elements (images, text, links, etc.)

Each collection item generates a slide from the template. When items are added or removed in the CMS, the slides update automatically.

Multi-Image Field

Bind the slider to a multi-image CMS field so each image becomes a slide automatically. This is useful for product galleries, portfolio images, or any item with multiple photos.

1. In the slider settings, switch the Source to Multi-image field
2. Select the multi-image field to bind to

This option is only available when a multi-image field is reachable from the slider’s context (e.g., inside a collection list or on a dynamic page).

Styling

You can style every part of the slider independently:

• Slide content — Add any elements inside slides and style them with design controls
• Navigation arrows — Select the prev/next buttons and customize their appearance
• Pagination bullets — Style the bullet indicators; the active bullet receives a current state that you can style separately