EffortLess Columns to Carousel

The plugin adds a Carousel panel to the block sidebar of the core Columns block. When “Display as carousel” is switched on, the front-end output of that block changes from a grid to a horizontally scrolling row using CSS scroll-snap. A small JavaScript file adds arrows, dots, keyboard navigation and optional autoplay. The plugin does not add a new block, so existing content is not changed and switching the option off restores the normal columns.

The CSS and JavaScript files are loaded only on pages that contain a Columns block with the carousel switched on.

Settings (Carousel panel in the block sidebar)

• Display as carousel – Off by default. Turns the block into a carousel.
• Slides per view (desktop) – 1 to 6, default 3. Applies above 781px wide.
• Slides per view (tablet) – 1 to 6, default 2. Applies from 601px to 781px.
• Slides per view (mobile) – 1 to 6, default 1. Applies at 600px and below.
• Autoplay – Off by default. Advances one slide at a time. Pauses while the pointer or keyboard focus is inside the carousel. Not used when the visitor’s system requests reduced motion.
• Delay (ms) – Shown when autoplay is on. 1000 to 30000, default 4000. Autoplay stops for good once the visitor uses the arrows, dots or keyboard, or touches or drags the slides.
• Show arrows – On by default. Previous and next buttons.
• Show dots – On by default. One button per scroll position.
• Loop – Off by default. When on, the next button on the last position returns to the first, and previous on the first goes to the last. Autoplay always returns to the first slide after the last.

Notes and limitations

• Each direct Column of the block is one slide. Slides per view sets how many are visible at once.
• If the number of slides is not larger than slides per view, the carousel has nothing to scroll.
• Without JavaScript the row still scrolls horizontally with its scrollbar, touch or trackpad, but arrows and dots are not shown.
• When every column fits in view, the arrows and dots are hidden and autoplay does nothing.
• If both arrows and dots are switched off, the scrollbar stays visible so the row can still be scrolled with a mouse.
• The gap between slides is the same gap the Columns block uses without the carousel.
• The “Stack on mobile” setting of the Columns block does not apply while the carousel is on.
• On multisite the option is stored in the post content of each site; there is no network setting.
• Not covered: vertical carousels, thumbnails, and other block types.

External services

This plugin does not connect to any external service.