Carousel

The Carousel component displays a rotating sequence of slides. It supports both autoplay and manual navigation. Each carousel item can include an image (internal or external), an overlaid title, and a short description.

Preview

Fields

  • autoplay (default: enableAutoPlay) - A switchable field:

    • enableAutoPlay

      • pauseButton (optional) - Checkbox to display a play/pause button.

      • time (optional) - Time interval in milliseconds for auto-slide transition (default: 3000).

    • disableAutoPlay

At least one carousel item is required. Each item includes:

  • imageChooser (default: image) - A switchable field allowing internal or external image selection:

    • If image is selected:

      • image (required) - Chooser for selecting an image from Magnolia DAM.

      • altText (optional) - Alt text for accessibility.

    • If externalImage is selected:

      • externalImage (required) - A full URL to the external image.

      • externalImageAlt (optional) - Alt text for accessibility.

  • title (optional) - The title shown over the image.

  • description (optional) - A short text displayed below the title, also over the image.

Behavior

  • At least one carousel item is required.

  • Items are rendered in a horizontally scrollable carousel.

  • If autoplay is enabled:

    • Slides advance automatically based on the set time interval.

    • Play/pause button is shown if enabled.

  • If autoplay is disabled:

    • Carousel is navigated manually via arrows.

  • Each carousel item renders:

    • A full-width image.

    • Optional title and description overlaid on top of the image.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Carousel -p carousel
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules