Hero Slider Container and Hero Slide With Drupal Canvas

How to build and manage a hero carousel with the Hero Slider Container and Hero Slide components in Drupal Canvas, with the Vartheme BS5 theme — no code.

The Vartheme BS5 theme provides two components for building a hero carousel in Drupal Canvas:

Component	What it does
Hero Slider (Container)	The carousel wrapper. You place several Hero Slide items inside it and set how the carousel behaves (transition, autoplay, indicators, controls, height and controller colour).
Hero Slide	One slide: a title, rich-text content, an image, an optional button, and the slide layout.

Add as many Hero Slide items as you like inside the container, and reorder them by dragging in the Layers panel.

A hero slider on the live site

Building a Hero Slider

1. Open a Drupal Canvas page and the Library (the + icon); open the Hero group.

2. Drag the Hero Slider (Container) onto the page.

3. Drag one or more Hero Slide items into the container's Slides slot.

4. Select each slide to set its title, content, image, button and layout.

Hero Slider and Hero Slide in the Library Hero group

Managing Slides — Inside a Layout Too

The Layers panel is where you reorder and manage everything. It works the same whether the slider sits on its own or inside a Layout (a Section with columns).

• Reorder — drag a Hero Slide up or down in the tree.

• Duplicate / Delete — open a slide's context menu (the …).

• Move into a layout — drop the Hero Slider into a Section column; the tree then shows Section → Column → Hero Slider (Container) → Slides → Hero Slide, and you still manage the slides the same way.

Managing the hero slider inside a Section layout

Container Settings (How the Carousel Behaves)

Select the Hero Slider (Container) to open its Settings:

Setting	What it does
Edge-to-edge background	Let the slider stretch the full width of the page.
Transition	Slide or Fade between slides.
Autoplay + Autoplay interval	Advance slides automatically, and how long each slide shows (in milliseconds).
Pause on hover	Stop autoplay while the visitor's pointer is over the slider.
Show indicators	Show the little dots that mark each slide.
Show prev/next controls	Show the arrows to move between slides.
Slider height	A fixed height — 500, 700 or 900 pixels.
Controller color	The colour of the arrows and dots.

Pick a Controller color that is easy to see on every slide. Primary works well on both dark image backgrounds and light split layouts, so the indicators and the prev/next arrows stay visible as the slides change.

Hero slider container settings, with the whole slider in view

Slide Settings (One Slide)

Select a Hero Slide to set:

• Enabled — show or hide this slide.

• Active by default — the slide shown first when the page loads.

• Title and Content — the heading and rich-text body.

• Image — the slide's picture (from the Media library).

• Media position — the slide layout (see below).

• Title tag / Title size, Content max width, Vertical alignment, Text alignment.

• Button — optional call-to-action: text, link and style.

Hero slide settings

Slide Layouts — One Example per Media Position

Each slide's Media position sets its layout. There are five choices.

Overlay background

The image fills the slide and the text sits on top.

Overlay layout

Split — image start

The image is on one side and the text on the other, image first.

Image start layout

Split — image end

The same split layout, with the image after the text.

Image end layout

Text only

No image — just the title, content and button.

Text only layout

Inherit from container

The slide follows the container's media position instead of setting its own.

Inherit layout

Publishing

Drupal Canvas auto-saves a draft while you edit. Click Review changes, then Publish. The container handles the carousel wiring for you automatically.

Related Documentation

Editing the Header and Footer With Drupal CanvasManaging Multiple Accordions With Drupal Canvas