Carousels

Responsive owl-carousel slider with per-breakpoint item counts, autoplay, navigation arrows, dots, lightbox, and lazy-load support. It is shown in the block inserter as Canvas Carousel and registered as canvas-core/carousel.

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 the carousel moves through, in the order they appear. Each row can hold a different kind of content.

  Each row of Slides takes:

  • Slide TypeDefaultImage

    What this slide holds. The settings below change to match: only the ones the chosen kind uses are read.

    ChoicesImageVideo (self-hosted)Embed / iFrameVideo Link (plays in place)Custom HTML

  • ImageDefault0

    The picture this slide shows, chosen from your media library.

  • Image Alt TextDefaultEmpty

    Overrides the media library alt text for this slide only.

  • Video URL (mp4/webm)DefaultEmpty

    Address of the video file this slide plays. Used by the self hosted Video kind, and by Video Link for the film it opens in place.

  • Video Poster URLDefaultEmpty

    A still shown until the video can paint its first frame. Pick the frame the film opens on so there is no flash of black.

  • Embed URL (YouTube/Vimeo/Maps/…)DefaultEmpty

    Address of the page this slide embeds, such as a video on a sharing site or a map.

  • Embed Aspect RatioDefault16:9

    The shape the embedded frame keeps as it resizes, so it never letterboxes or crops.

    Choices16:94:31:121:9

  • Custom HTMLDefaultEmpty

    The markup this slide shows, for content none of the other kinds covers. Anything unsafe is stripped out on save.

  • TitleDefaultEmpty

    A caption for this slide. It only appears when Show Title is turned on.

  • DescriptionDefaultEmpty

    A line or two under the caption. It only appears when Show Description is turned on.

  • Link URLDefaultEmpty

    Where clicking this slide takes the visitor. It is ignored while Lightbox Images is on, because the picture opens instead.

  • Open in New TabDefaultOff

    Opens the link in a new browser tab, leaving your page behind it.

  • Column SpanDefault0

    How many carousel columns this slide occupies. Needs Merge Slides turned on.

Responsive

• Slides VisibleDefault0

  Base number of slides on screen, which every breakpoint below falls back to. Empty lets the per-breakpoint counts decide.

• Items (Mobile)Default1

  Zero leaves this breakpoint unstated, so the carousel falls back to Slides Visible.

• Items (SM)Default2

  How many slides are on screen at once from a small screen up, around the size of a large phone held sideways.

• Items (MD)Default3

  How many slides are on screen at once from a tablet width up.

• Items (LG)Default4

  How many slides are on screen at once from a laptop width up.

• Items (XL)Default4

  How many slides are on screen at once on the widest screens.

Behaviour

• Always Write These SettingsDefaultEmpty

  Settings whose value is written into the markup even when it matches the carousel engine's own default, which is otherwise left out. Accepts nav, pagi, margin and speed, separated by spaces.

• Item Gap (px)Default20

  The gap between one slide and the next, in pixels. Set it to 0 for slides that meet edge to edge.

• LoopDefaultOff

  Runs the slides round in a circle, so there is no first or last and the carousel never stops at an end.

• Autoplay (ms, 0=off)Default0

  How long each slide rests before the carousel moves on by itself, in thousandths of a second. Set it to 0 and the carousel only moves when a visitor asks.

• Speed (ms)Default250

  How long the movement from one slide to the next takes, in thousandths of a second. Higher is slower and gentler.

• Slide ByDefault1

  How many slides move on each step. Match it to the number on screen to turn a page at a time rather than shuffle along one by one.

• Center ModeDefaultOff

  Holds the active slide in the middle with its neighbours showing on either side, rather than starting the row at the left edge.

• RewindDefaultOff

  Runs back to the first slide when it reaches the end, instead of stopping there. Loop is the smoother choice; this one is for a carousel that has to keep a real beginning.

• Stage Padding (px)Default0

  Space held back at both ends of the carousel, in pixels, so a sliver of the previous and next slide shows and the row reads as continuing.

• Stage Padding - Small (px)Default0

  Stage padding from 576px up. 0 inherits the base value.

• Stage Padding - Medium (px)Default0

  Stage padding from 768px up. 0 inherits the smaller value.

• Stage Padding - Large (px)Default0

  Stage padding from 992px up. 0 inherits the smaller value.

• Stage Padding - Extra Large (px)Default0

  Stage padding from 1200px up. 0 inherits the smaller value.

Navigation

• Show ArrowsDefaultOn

  Shows the back and forward arrows at the sides of the carousel.

• Arrows Always VisibleDefaultOff

  Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

• Show DotsDefaultOn

  Shows the row of dots under the carousel, which tells a visitor how many slides there are and lets them jump straight to one.

• Enter AnimationDefaultEmpty

  Animation class played as a slide arrives, e.g. zoomIn, rollIn, fadeIn.

• Exit AnimationDefaultEmpty

  Animation class played as a slide leaves.

Advanced

• Carousel KindDefaultImage Carousel

  Adds the kind class the design styles the carousel by. Plain leaves the container unstyled beyond the carousel itself.

  ChoicesImage CarouselPlain - no kind class (empty)

• Bare SlidesDefaultOff

  Writes each slide straight into the carousel with no wrapper of its own. The carousel still wraps every slide as it initialises.

• Merge SlidesDefaultOff

  Lets a slide occupy more than one column, using its own Column Span.

• Play Videos In PlaceDefaultOff

  Turns Video Link slides into players that open inside the carousel when clicked.

• 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

• Lazy LoadDefaultOff

  Holds each picture back until its slide is about to come into view, so a long carousel does not make a visitor wait for images nobody has looked at yet.

• Auto WidthDefaultOff

  Lets every slide keep its own natural width instead of sharing the row equally, which suits logos and portrait and landscape photos side by side.

• Full WidthDefaultOff

  Runs the carousel out to the full width of the screen rather than staying inside the page container.

• Show TitleDefaultOff

  Shows the caption held on each slide, under its picture.

• Show DescriptionDefaultOff

  Shows the longer line held on each slide, under the caption.

• Link ImagesDefaultOn

  Makes each picture clickable, using the Link URL held on its own slide. Slides with no link stay as plain pictures.

• Lightbox ImagesDefaultOff

  Opens the full size picture over the page when a slide is clicked, in place of following its link.

• Lightbox TypeDefaultIndividual Images

  Grouped Gallery treats the whole carousel as one set, so a visitor who opens any picture can step through the rest without closing it. Individual Images opens one picture at a time.

  ChoicesIndividual ImagesGrouped GalleryShown when Lightbox Images is on

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, Cookie Consent, Countdowns, Flip Cards, Galleries.