Sliders

A slider. Build it once here, then place it anywhere with the slider block. The individual frames are Slides.

You will find it in the WordPress admin menu as Sliders, stored as canvas_slider.

What You Get

These decide where items appear and what you can do with them:

• One item is called a Slider.
• Items have no page of their own: they are placed inside other pages.
• Editor features: title.

Demo

A panel on the Slider edit screen, holding these settings:

• Demo

  Load this demo's stylesheet, fonts and scripts on this content, and add its body class. Leave as None for content that is not part of a demo.

• Demo Role

  Marks this content as the demo's cart, checkout or other named piece, so the demo can link to it without storing an ID. Free-form; used with the Demo above.

  Shown when Demo is set

Height

A panel on the Slider edit screen, holding these settings:

• 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.

Navigation

A panel on the Slider edit screen, holding these settings:

• 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.

Slider Options

A panel on the Slider edit screen, holding these settings:

• 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.

Overlay

A panel on the Slider edit screen, holding these settings:

• 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.

Slide Query

A panel on the Slider edit screen, holding these settings:

• Order By

• Order

• Max Slides

Related

Other Canvas content types: Copyrights, Events, Footers, Forms, Headers, Heroes.