Sliders

A slider in Canvas is built once and placed many times. The slider itself holds the behaviour, its height, navigation, timing and effects, while each frame is a separate Slide holding its own background, caption and buttons. Because the slider is a record rather than page content, the same slider can sit on the front page and a landing page at once, and editing a slide updates both. Read this page when you are building your first slider or when a slide refuses to appear.

The Two Pieces

Two admin menus work together, and knowing which owns what saves hunting:

Sliders holds the container: height, navigation arrows and dots, autoplay and transition behaviour, the overlay, and an optional query that pulls slides from your content. Give the arrows extra classes in Arrow Class when a design restyles the control itself, set Slide Number Digits to 2 for a counter that reads 01 / 09 rather than 1 / 9, and set Background Colour when the slide artwork does not cover the whole section, so the colour shows behind it instead of the page.
Slides holds the frames: each slide's background image or video, its caption heading and text, and its buttons. Every slide is assigned to exactly one slider.

How To Build A Slider

Starting screenSlidersAdd New.

Create the slider first and give it a recognisable title, because slides are assigned to it by name. Set its Height and choose its Navigation behaviour, then publish it.

Now go to Slides > Add New for each frame. Set Assign to Slider to the slider you created, choose the Background Type and its image or video, and write the caption and buttons. Slides support page attributes, so the Order field is how you control the sequence the frames play in.

Finally, place the slider. Open the page you are building in the block editor, insert the Slider block from the Canvas Interactive category, and choose your slider from its Slider setting. The block is a pointer, so it carries no settings of its own beyond the choice of slider, and everything about how the slider looks is edited on the slider and its slides.

How To Put A Slider Above A Page's Content

Pages, posts, Portfolio projects and Events all carry a Slider panel in the side column of their edit screen, holding a single Select Slider setting. Choosing a slider there renders it between the header and the page content, which is the right tool when the slider is that page's hero rather than a block placed mid-layout.

That slider is on the canvas too. Every page and single template carries a Page Slider block straight after the header, showing the slider the page assigns, with Edit this slider in its sidebar because the slides and settings still live on the record. Leave its Slider setting on This page's slider so each page brings its own; pick a slider instead and that template always shows that one. A page that assigns none shows a one line note in its place, which no visitor sees. The slides sit still in the editor and play on the site, so judge timing and transitions on the published page.

Pitfalls

A slide does not appear. Every slide must be assigned to a slider through Assign to Slider. An unassigned slide is stored but belongs to nothing, so nothing renders it.

The slides play in the wrong order. The sequence comes from each slide's Order field under page attributes, not from the order the slides were created in. Number them explicitly.

The slider sits below a transparent header instead of behind it. Turn on the slider's Include Header setting, which extends the slider behind the header for transparent header layouts.

Every Setting

The slider's own panels are listed below, generated from the product, so they are current by construction:

Height
Custom Height (px)

Shown when Height is "custom".
Responsive Height
Background Colour

Colour painted behind the slides, for a design whose slide artwork does not cover the whole section.
Inner Wrapper

Wraps the slides in an inner element. Turn off to place the slides directly inside the slider section.
Caption Inner Wrapper

Groups each caption's heading, text and buttons in an extra element inside .slider-caption. Turn off to place them directly in the caption.
Include Header

Extends slider behind the header for transparent headers.
Extra CSS Classes

Space-separated classes appended to the slider section: e.g. an effect class such as swiper-kenburn-effect, or a design-specific hook.
Arrows
Prev Arrow Icon

Shown when Arrows is "1".
Next Arrow Icon

Shown when Arrows is "1".
Arrow Container Class

Optional CSS class for a container wrapping both arrows, e.g. swiper-navs. Leave empty to output the arrows unwrapped.

Shown when Arrows is "1".
Arrow Class

Optional CSS class added to both arrows, e.g. bg-transparent for a design that draws its own arrow.

Shown when Arrows is "1".
Slider Element

Which element the slider band is. Section is the semantic default; choose Div for a design whose slider is a plain container inside another section.
Pagination Dots
Scrollbar
Slide Numbers
Slide Number Placement
Slide Number Separator

Character between the current and total slide number. Empty when the design draws its own divider rule.
Slide Number Digits

Pad the numbers with leading zeros to this many digits, for a design that counts 01 / 09 rather than 1 / 9. Leave at 0 for no padding.
Thumbnail Navigation

Shows a clickable strip of slide thumbnails, synced to the slider.
Scroll Cue Image

Small graphic (e.g. a mouse or chevron) shown at the bottom of the slider that scrolls down when clicked. Leave empty for no scroll cue.
Scroll Cue Icon

Icon shown at the bottom of the slider that scrolls down when clicked. Used when no Scroll Cue Image is chosen.
Scroll Cue Target

The element the cue scrolls to, e.g. #content.

Shown when Scroll Cue Image is set or Scroll Cue Icon is set.
Scroll Cue Offset (px)

Pixels to stop short of the target, e.g. to clear a sticky header.

Shown when Scroll Cue Image is set or Scroll Cue Icon is set.
Scroll Cue on Dark Slide

Use the light-on-dark treatment for the cue.

Shown when Scroll Cue Image is set or Scroll Cue Icon is set.
Scroll Cue Image Classes

Classes on the cue image: the default gives it a repeating downward nudge.

Shown when Scroll Cue Image is set or Scroll Cue Icon is set.
Effect
Direction
Transition Speed (ms)
Autoplay
Autoplay Delay (ms)

Shown when Autoplay is "1".
Pause on Hover

Shown when Autoplay is "1".
Loop
Grab Cursor
Parallax

Fixes the slides behind the page so the content scrolls over them.
Slide Parallax Motion

Moves slide captions at a different rate to their background as the slide travels.

Shown when Parallax is "1".
Auto Height
Video Autoplay
Start Slide
Slides Per View (Desktop)

Show multiple slides side-by-side. Best with the Slide or Coverflow effect.
Slides Per View (Tablet)
Slides Per View (Mobile)
Slides Per View (Large Desktop)

Slides shown from 1200px up. Empty keeps the desktop count.
Track Slide Progress

Publishes each slide's travel as a CSS custom property while it moves, so styles can react to how far through the transition it is.
Settings Delivery

Where the playback settings are written. Script settings hands them to the slider script instead of printing them on the element, for designs whose slider carries no configuration markup.
Enable Overlay
Overlay Color

Shown when Enable Overlay is "1".
Static Layer

HTML or block markup rendered ONCE as a persistent overlay across all slides (e.g. a fixed phone/contact line or badge). Position it with inline styles or utility classes (it overlays the slider; only its own children receive clicks).
Static Layer Wrapper

Wraps the static layer in a full-size overlay element that only its own children can click. Turn off to place the content directly inside the slider, for a design that positions a single element (e.g. a social row) against the slider itself.
Order By
Order
Max Slides

Every slide's panels, its background, caption, buttons and per-slide settings, are on the Slides reference page.