Interactive module

Slider block

A slider you design yourself: every slide holds any blocks and has its own background image, colour and overlay. Slide or fade, one or several slides at a time.

Overview

The Slider shows a row of slides that visitors move through with arrows, dots, swiping or the keyboard. Each slide is a Slide block that can hold any blocks — headings, text, buttons, images, even a Container with columns — and has its own background in the Styles tab. Use it for hero banners, testimonials, feature highlights or announcements.

For sliders of posts, products, images or videos, use the slider layouts of Posts, Products, Gallery or Video Gallery instead: they fill the slides for you.

At a glance

Block name: wpbb/slider
Module: Interactive
Find it by searching: Slider
Contains: Slide
Loads JavaScript on the site: Yes, the small shared carousel script, only on pages that use a slider or carousel

When and why to use it

A full-width hero banner with a background photo, headline and button on each slide.
Customer testimonials that fade from one quote to the next.
Three feature cards at a time on desktop, one at a time on phones.

Example scenarios

Homepage hero: alignment Full width, Effect Slide, Minimum height 560px, arrows and dots On the slides, autoplay every 6 seconds; each slide with a photo background, a dark overlay at 50% and white text.
Testimonials: Effect Fade, arrows and dots Below, Name for screen readers “Customer stories”.

How to add the Slider block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Slider in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Slider in the results. The block appears with three sample slides, each with a heading, a paragraph and a button.
Configure the content. The canvas shows one slide at a time. Use the bar under the slider to move to the previous or next slide, Add slide or Duplicate the current one. Click Edit this slide’s background to select the visible Slide and set its background image, colour or overlay in its Styles tab.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Previous / Next slide

What it does: Shows the previous or next slide on the canvas, so you can edit it.
What to enter or choose: The arrow buttons in the bar under the slider.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: To reach the slide you want to edit.
Example: —
Result: The canvas shows that slide; the bar says “Slide 2 of 3”. The page itself is not affected.

Add slide

What it does: Adds a new slide at the end, with a heading, text and a button.
What to enter or choose: Click Add slide in the bar.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: When you need another slide.
Example: Add a fourth slide for a seasonal offer.
Result: The new slide appears and is shown on the canvas.

Duplicate

What it does: Copies the visible slide, including its content and background, right after it.
What to enter or choose: Click Duplicate in the bar.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: To make similar slides quickly.
Example: Duplicate a styled slide, then change its heading and photo.
Result: An identical slide appears next to the original.

Edit this slide’s background

What it does: Selects the visible Slide block, so the sidebar shows its own settings and Styles.
What to enter or choose: Click the link in the bar.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: To set a background image, colour, gradient or overlay for one slide.
Example: —
Result: The Slide is selected.

Settings panel: Slider

Effect

What it does: How slides change: sliding sideways, or fading in place.
What to enter or choose: One of: Slide, Fade.
Default: Slide
How to use it: Click one of the buttons in the group.
When to use it: Slide for most sliders and for several slides at a time. Fade for calm, one-at-a-time content such as quotes.
Example: Fade for testimonials.
Result: Fade always shows one slide at a time; slides keep the height of the tallest one.

Slides at a time (desktop)Shown when Effect is Slide

What it does: How many slides are visible side by side on screens 1024px and wider.
What to enter or choose: 1–4
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: 1 for a hero; 2–4 for cards.
Example: 3 for feature cards.
Result: The slides share the width; arrows move one slide at a time.

Slides at a time (tablet)Shown when Effect is Slide

What it does: Slides visible on screens 600–1023px wide.
What to enter or choose: 1–3
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Usually one less than on desktop.
Example: 2.
Result: Applies on tablets.

Slides at a time (mobile)Shown when Effect is Slide

What it does: Slides visible on screens narrower than 600px.
What to enter or choose: 1–2
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Almost always 1.
Example: 1.
Result: Applies on phones.

Space between slides (px)Shown when Effect is Slide

What it does: The gap between slides that are visible side by side.
What to enter or choose: 0–96
Default: 24
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: When showing several slides at a time.
Example: 16 for cards.
Result: Wider or narrower gaps between slides.

Minimum height (px)

What it does: The minimum height of every slide.
What to enter or choose: 0–1200 (0 = as tall as the content)
Default: 420
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: For hero banners, so short slides still look generous.
Example: 560 for a homepage hero.
Result: Slides are at least this tall; all slides share the height of the tallest one.

Minimum height on mobile (px)

What it does: A different minimum height on phones.
What to enter or choose: 0–1200 (0 = same as desktop)
Default: 0
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: When the desktop height is too tall for small screens.
Example: 360.
Result: Applies on screens narrower than 600px.

Arrows and dots

What it does: Where the arrows and dots appear.
What to enter or choose: One of: On the slides, Below.
Default: On the slides
How to use it: Click one of the buttons in the group.
When to use it: On the slides for hero banners; Below for cards and quotes.
Example: On the slides for a hero.
Result: On the slides: arrows at the sides, dots at the bottom, and slide content is kept clear of the arrows. On phones the arrows are hidden there; visitors swipe or use the dots.

Name for screen readers

What it does: The name screen readers announce for the slider.
Default: “Slides”
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always worth setting when a page has more than one slider.
Example: “Customer stories”.
Result: Announced as “Customer stories, carousel”.

Settings panel: Carousel

Arrows

What it does: Shows previous/next arrow buttons.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on for desktop visitors.
Example: On.
Result: Arrows at the sides.

Dots

What it does: Shows a dot per page below the slides.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: To show how many slides there are.
Example: On.
Result: Clickable dots.

Loop

What it does: After the last slide, continues from the first.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On.
Result: Arrows never become disabled.

Autoplay

What it does: Advances slides automatically.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Use sparingly — moving content distracts.
Example: On for a hero slider.
Result: Pauses on hover and focus, shows a pause button, and never runs for visitors who prefer reduced motion.

Delay (seconds)Shown when Autoplay is on

What it does: Time each slide stays.
What to enter or choose: A number from 2 to 15 (s).
Default: 5 seconds
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Longer for slides with text.
Example: 6.
Result: Slower or faster autoplay.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Slider offers.

Element: Block

The whole slider (spacing around it, a background behind the slides).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: All slides

Every slide at once — for example the same radius or padding on all slides. Style one slide on its own in that Slide’s Styles tab.

Styles-tab controls for “All slides”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Element: Arrows

The previous/next arrow buttons. Hover and Focus states.

Styles-tab controls for “Arrows”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Dots

The dots. Active = the dot of the current slide.

Styles-tab controls for “Dots”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Active
	Color / Gradient	—	Normal, Active
	Image	—	Normal
Border	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Active — Applies to the dot of the current slide.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Set how many slides show at a time separately for desktop, tablet and mobile. On phones, arrows placed on the slides are hidden (visitors swipe or tap the dots), and the minimum height can be set separately.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%), Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

The slides are a native scrolling row with snap points, so they already swipe and scroll without JavaScript. A small shared script (loaded only on pages with a slider or carousel) adds the arrows, dots, autoplay and the fade effect. Without JavaScript, the fade effect shows the first slide.

Accessibility

The slider is a labelled region announced as a carousel; each slide is announced as “2 / 5”.
Arrow buttons and dots have labels and work with the keyboard; with the slide row focused, the Left and Right arrow keys move one slide.
Autoplay pauses on hover and focus, has a pause button, and never runs for visitors who prefer reduced motion.
With the fade effect, hidden slides cannot be reached with the keyboard or a screen reader.

Tips and best practices

Put the most important message on the first slide — many visitors never see the others.
Use autoplay sparingly and with a delay of at least 5 seconds.
For text over photos, add an overlay in the Slide’s Styles tab so the text stays readable.

Limitations and notes

Up to 4 slides at a time on desktop, 3 on tablet and 2 on mobile.
The editor shows one slide at a time.

Troubleshooting

The arrows and dots do not appear.

They only appear when there is something to scroll to: with three slides and three at a time, everything already fits. Also check that Arrows and Dots are on in the Carousel panel.

Text on my photo is hard to read.

Select the Slide (Edit this slide’s background), open its Styles tab → Background, and add an overlay colour with some opacity; set the text colour to white.