Image Sliders

FlexSlider-powered image slider with slide/fade animation, autoplay, arrows, dots, thumbnail nav, and touch-swipe support. It is shown in the block inserter as Canvas Image Slider and registered as canvas-core/image-slider.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Slides

• SlidesDefaultEmpty

  The slides, in the order they appear.

  Each row of Slides takes:

  • ImageDefault0

    The picture shown on this slide.

  • Alt TextDefaultEmpty

    Overrides the attachment's own alt text for this slide. Empty uses the Media Library value: the same contract Gallery and Overlay Item use.

  • ThumbnailDefault0

    Optional small image for the thumbnail nav. Falls back to the slide image.

  • CaptionDefaultEmpty

    Wording shown over this slide.

  • Link URLDefaultEmpty

    Where this slide sends the reader when it is clicked. Empty makes the slide a picture only.

  • Caption Heading

    Shown when the caption style is Slide Caption

  • Caption Heading Link

    Where the caption headline sends the reader. Empty leaves it as plain wording.

  • Caption Subheading

    Line under the caption headline.

  • Background Position

    Which part of the photo stays in frame when the slide is a background image.

  • Caption ClassesDefaultEmpty

    Styling for this slide's caption box. Empty uses the slider's own caption styling.

  • Caption AlignmentDefaultEmpty

    Where this slide's caption sits over the photo. Empty follows the slider; type none to centre it with no alignment classes at all.

  • Open in New TabDefaultOff

    Open the slide link in a new browser tab.

Slider

• AnimationDefaultSlide

  Whether one slide pushes the next along or crossfades into it.

  ChoicesSlideFade

• DirectionDefaultHorizontal

  Whether the slides move sideways or up and down.

  ChoicesHorizontalVertical

• AutoplayDefaultOn

  Move to the next slide on a timer, with no clicking.

• Autoplay Interval (ms)Default5000

  How long each slide stays on screen, in milliseconds.

  Shown when Autoplay is on

• Speed (ms)Default600

  How long the move from one slide to the next takes, in milliseconds.

Navigation

• ArrowsDefaultOn

  Show the previous and next arrows over the slides.

• Pagination DotsDefaultOn

  Show the row of dots that jump to a slide.

• Thumbnail NavDefaultOff

  Show a strip of small pictures below the slider that jump to a slide.

• Thumbnail Grid ClassDefaultEmpty

  Column count for the thumbnail strip, e.g. grid-5 or grid-6. Adds flex-thumb-grid alongside it.

  Shown when Thumbnail Nav is on

• Thumbnail SizeDefaultThumbnail

  Registered image size used for each slide's thumbnail image.

  ChoicesThumbnailMediumLargeFull - the uploaded file itselfShown when Thumbnail Nav is on

Settings

• Lazy Load SlidesDefaultOff

  Load each slide image only when it scrolls into view.

• Slide Image SizeDefaultLarge

  Registered image size each slide is delivered at. Full keeps a photo that is already the exact slide size from being re-cropped.

  ChoicesMediumLargeFull - the uploaded file itself

• Open Slides in LightboxDefaultOff

  Make the slides a lightbox gallery: clicking a slide opens its linked image full size, with next/previous across the whole slider.

• Mark the Slider Root as the GalleryDefaultOff

  Put the lightbox gallery marker on the slider root rather than on the inner slide track.

  Shown when Open Slides in Lightbox is on

• Slide RenderingDefaultImage

  Background fills the slide with the photo so a caption can sit over it.

  ChoicesImageBackground Image

• Caption StyleDefaultEmpty

  Slide Caption builds the caption from each slide's heading and subheading.

  ChoicesInline Overlay (empty)Slide Caption

• Slide ClassesDefaultEmpty

  Classes on every slide.

• Slide Link ClassesDefaultEmpty

  Classes on each slide's link. A slide whose caption sits over the photo needs the link to be the positioned box.

• Caption Inside the LinkDefaultOff

  Puts the caption overlay inside the slide's link, so the whole slide including its caption is one clickable card.

• Caption Alignment ClassesDefaultEmpty

  Flex alignment on the caption's container. Empty aligns it bottom-left.

• Caption ClassesDefaultEmpty

  Classes on the caption box.

• Caption Heading ClassesDefaultEmpty

  Classes on the caption headline.

• Caption Heading Link ClassesDefaultEmpty

  Classes on the caption headline link.

• Caption Subheading ClassesDefaultEmpty

  Classes on the caption subheading.

• State Every Playback SettingDefaultOff

  Write the animation, speed, interval, arrow and dot settings into the markup even where they match the default.

Advanced

• Pause on HoverDefaultOn

  Stop the slideshow while the pointer rests on the slider, and start it again on leaving.

• Smooth HeightDefaultOn

  Let the slider grow and shrink to fit each slide instead of holding one height.

• Touch SwipeDefaultOn

  Let a visitor swipe between slides on a touch screen.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.