Slider and Slide blocks

Blocksify Pro Slider and Slide blocks turn freely composed block layouts into hero sliders, testimonial carousels, and logo strips.

The Slider moves whole authored layouts, while the Media Slider element moves images inside a Content Loop card. The inserter provides one Slider entry, with no separate hero or testimonial variations, thumbnail or synchronized sliders, or effects beyond Slide, Fade, and Coverflow.

Requirements

The Slider and Slide blocks ship in Blocksify Pro 1.2.0 and require Blocksify 1.2.1 or newer. If the free plugin is older or its shared slider is unavailable, the pair does not appear in the inserter.

1. Go to Plugins → Installed Plugins.
2. Confirm that Blocksify and Blocksify Pro are active.
3. Update Blocksify if its version is older than 1.2.1. The Slider entry becomes available after the requirement is met.

Where to find it

1. Open a page in the block editor.
2. Open the block inserter and choose Blocksify → Slider. A Slider with three slides appears on the canvas.
3. Select the Slider to open its toolbar and the Slider panel in the settings sidebar.

Editor canvas

The editor uses a static canvas rather than playing the published carousel. Browsing a slide changes only the editing view, so it does not change the saved Start slide; follow Build a hero slider for a complete editing sequence.

Editor control	What it does
Previous slide / Next slide	Moves the canvas between slides. The counter shows the current position as N / M.
Add slide	Inserts a new slide after the one on the canvas. The + at the end of the dots bar does the same thing.
Duplicate slide	Copies the current slide and names the copy from its source label.
Move slide left / Move slide right	Changes the current slide’s order.
Delete slide	Removes the current slide. It is unavailable when only one slide remains.

When the Slider itself is selected, the Left and Right Arrow keys also browse the slides. Selecting a block inside a slide leaves those keys available for editing that block.

• A new Slider starts with Slide 1, Slide 2, and Slide 3.
• A newly added slide uses the next deck-size label, such as Slide 4.
• A duplicate uses the source name followed by “copy.” Labels do not renumber when slides move.
• An empty slide shows a dashed placeholder with a centered + for adding its first block.
• The dots bar appears when the Slider has more than one slide.

Slider

The Slider panel controls the track in the order shown below. Columns and Gap can be set separately for Desktop, Tablet, and Mobile; see Responsive and hover editing for the device picker.

Setting	Options and default	What it does
Effect	Slide (default), Fade, Coverflow	Chooses the transition. Fade always shows one slide, so Columns, Gap, and Center slides are unavailable while it is selected.
Columns	1 by default; 1–10 per device	Sets how many slides are visible at once. Tablet and Mobile inherit the wider device until overridden.
Gap	No value by default; per device	Sets the space between slides for Slide and Coverflow.
Speed	500 ms by default; 100–3000 ms in 50 ms steps	Sets the transition time.
Loop	Off by default	Repeats the slides endlessly. It is unavailable unless the deck has more slides than the widest Columns value on every device.
Center slides	Off by default	Centers slides in the viewport. It is unavailable with Fade.
Auto height	Off by default	Lets the viewport follow the current slide’s height.
Start slide	Slide 1 by default	Chooses the numbered slide shown first. The selector continues to list Slide 1, Slide 2, and Slide 3 after those slides receive authored labels.
Autoplay	Off by default	Moves the Slider automatically.
Delay	4000 ms by default; 1000–15000 ms in 500 ms steps	Sets the wait between automatic moves. It appears only when Autoplay is on.
Pause on hover	On by default	Pauses automatic movement while a pointer is over the Slider. It appears only when Autoplay is on.

Navigation

The Navigation panel controls the arrows and dots shown to visitors.

Setting	Options and default	What it does
Controls	Dark (default), Light	Chooses the shared skin for arrows and dots.
Arrows	Always (default), On hover, Hidden	Controls arrow visibility.
Arrows position	Inside (default), Outside	Places the arrows inside the slide area or in reserved space outside it. This row is hidden when Arrows is Hidden.
Dots	Always (default), On hover, Hidden	Controls dots visibility.
Dots position	Outside (default), Inside	Places the dots outside or inside the slide area. This row is hidden when Dots is Hidden.
Dots align	Center (default), Start, End	Aligns the dots row. This row is hidden when Dots is Hidden.

On hover also reveals the control when keyboard focus is within the Slider. On a touch device without hover, the control stays visible.

Styling

The Styling panel separates the three navigation parts so each can have its own responsive and hover styling.

Part	What it styles
Arrows	Both previous and next arrow controls.
Dots	Every inactive navigation dot.
Active dot	The dot for the current slide.

Arrows is omitted when Arrows is Hidden. Dots and Active dot are omitted when Dots is Hidden.

Slide

Select an individual Slide to edit its name, vertical placement, background, and animation settings. Use the back-to-parent control above the sidebar panels to return to the Slider settings.

Setting	Options and default	What it does
Label	Seeded as Slide N	Names the slide in List View and supplies its accessible label.
Vertical align	Top (default), Middle, Bottom	Places the authored content when the slide is taller than its contents.

A Slide can paint an image layer and a gradient layer behind its inner blocks. It does not add video, overlay, or shape-edge background layers.

For animation, the Slide exposes three targets: Slide, Slide content, and Content blocks (staggered). The Interaction triggers reference explains On Slide Active, which can also be added to any inner block that has Block Animation controls.

What visitors see

• The Slider follows the Columns and Gap values for the visitor’s device.
• Images in up to two adjacent slides begin loading before those slides enter view, while images farther away load when needed.
• Left and Right Arrow keys move only the Slider that contains keyboard focus and do not take over keys inside fields, buttons, or editable text.
• Off-screen slides leave the keyboard order and accessibility tree without losing their layout. Authored labels are preserved; unlabeled slides are announced as “N of M.”
• Arrows and dots have accessible action labels. Dots are announced as “Go to slide N.”
• When a visitor asks for reduced motion, transitions use no animation time, autoplay is suppressed, and animated content remains in its natural visible state.

Choose an effect

Effect	When to use it	Layout behavior
Slide	Use for hero sliders, testimonial carousels, and logo strips that move along a track.	Supports per-device Columns, Gap, and Center slides.
Fade	Use when one slide should replace another without showing neighboring slides.	Always shows one slide; Columns, Gap, and Center slides are unavailable.
Coverflow	Use when neighboring slides should remain visible, tilted in a three-dimensional stack around the active slide.	Supports per-device Columns, Gap, and Center slides.

Related articles

• Build a hero slider
• Interaction triggers
• Media Slider element
• Responsive and hover editing