Skip to main content
Version: Beaver Builder 2.11

Content Slider

Use Content Slider to display multiple slides with background images, video, or color, combined with optional headings, text, and call-to-action buttons.

Usage​

Use Content Slider to build a multi-slide presentation where each slide displays a background image, video, or solid color, combined with a heading, body text, and an optional call-to-action link or button. Slides cycle automatically on a configurable delay or respond to user navigation through arrows or dot controls.

This module works well for hero sections, promotional banners, featured content rotators, and any layout where a sequence of visually distinct messages shares a single fixed space on the page.

Module Settings​

The Content Slider module settings control what each slide displays, how the slider cycles between slides, and the global dimensions and colors applied across all slides.

Slides Tab​

The Slides tab manages individual slides and their content, background, style, link, and mobile settings.

Slides

The Slides section manages each slide displayed by the module.

Slide Settings
Slide

Adds one or more slides to the module. Each slide has its own General, Style, Link, and Mobile settings.

General tab
Slide Label

A label used to identify the slide in the Slides tab list. Not displayed on the front end.

Background

The Background section configures the visual background of the slide.

Background Settings
Type Default: Photo

Selects the background type for the slide.

  • Photo: Uses an uploaded image as the slide background and reveals the Background Photo and Overlay Color fields.
  • Video: Uses embedded video code as the slide background. Content overlay settings are not available when this type is selected.
  • Color: Uses a solid or transparent fill as the slide background and reveals the Background Color field.
  • None: Renders the slide with no background.
Photo Settings
Background Photo

Sets the background image for the slide.

Overlay Color Supports: Field Connections

Adds a color overlay on top of the background photo. Supports alpha transparency.

Video Settings
Background Video Code

Paste the embed code for the video displayed as the slide background. Content overlay settings are not available when Type is set to Video.

Color Settings
Background Color Supports: Field Connections

Sets the background fill color for the slide. Supports alpha transparency.

Content

The Content section configures the overlay content displayed over the slide background. Not available when Background Type is set to Video.

Content Settings
Type (Content) Default: None

Selects the content layout displayed over the slide background.

  • Text: Displays a heading and body text over the background.
  • Text & Photo: Displays a heading, body text, and an uploaded photo.
  • Text & Video: Displays a heading, body text, and an embedded video.
  • None: Adds no content overlay to the slide.
Text Content
Heading

Sets the heading text for the slide. Available when Type is set to Text, Text & Photo, or Text & Video.

Content

Sets the body text for the slide using the WordPress Classic Editor. Available when Type is set to Text, Text & Photo, or Text & Video.

Photo (Text & Photo Only)
Photo

Sets the foreground photo displayed alongside the slide text when Type is set to Text & Photo.

Video (Text & Video Only)
Video Embed Code

Paste the embed code for the foreground video displayed alongside the slide text when Type is set to Text & Video.

Style tab
Position Default: Left

Sets the horizontal alignment of the content overlay within the slide.

  • Left: Aligns the content area to the left side of the slide.
  • Center: Centers the content area within the slide.
  • Right: Aligns the content area to the right side of the slide.
Width Default: 50

Sets the percentage width of the content area within the slide.

Background Color Supports: Field Connections

Sets the color of the overlay behind the slide text content. Applies to the content area independently of the slide background.

Background Height Default: Auto

Controls whether the text background overlay matches the content height or stretches to the full slide height.

  • Auto: The overlay fits the height of the text content.
  • 100%: The overlay extends the full height of the slide.
Margins Supports: Link Values

Sets the outer margins around the slide content area.

Padding Supports: Link Values

Sets the inner padding within the slide content area.

Heading Tag Default: h2

Sets the HTML element used for the slide heading.

  • h1 through h6: Renders the heading with the selected HTML heading tag.
Color (Heading) Default: #ffffff; Supports: Field Connections

Sets the color of the slide heading text.

Typography (Heading) Supports: Responsive

The font settings for the slide heading.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Color (Text) Default: #ffffff; Supports: Field Connections

Sets the color of the slide body text.

Typography (Text) Supports: Responsive

The font settings for the slide body text.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Link tab
Link

Sets the link applied to the entire slide. When a call-to-action type is selected, this link is also used for the CTA text or button.

This field also includes Link Attributes for opening the link in a new tab, adding nofollow, and forcing downloads.

Link Attributes
Open in New Tab

Opens the link in a new browser tab or window instead of the current page. Helpful for external links or downloads, so visitors do not lose their place on the site.

Uses target="_blank" in the link code.

No Follow

Tells search engines not to pass ranking authority through the link. Commonly used for sponsored links, affiliate links, or links that should not affect search rankings.

Uses rel="nofollow" in the link code.

Force Download

Prompts the browser to download the linked file instead of opening it. Useful for PDFs, ZIP files, and other downloadable files.

If supported by the browser and file type, the link uses the download attribute.

Type (CTA) Default: None

Selects the call-to-action element displayed on the slide.

  • None: No call-to-action element is shown.
  • Link: Displays the CTA as a text link using the slide link.
  • Button: Displays the CTA as a styled button and reveals button styling settings.
CTA Text
Text

Sets the label for the call-to-action link or button. Available when Type is set to Link or Button.

Button Settings
Button Icon Supports: Field Connections

Sets an icon displayed on the CTA button. When an icon is selected, reveals the icon position and visibility settings.

Button Icon Settings
DuoTone Primary Color (DuoTone Icons Only) Supports: Field Connections

Sets the primary color for DuoTone Font Awesome icons on the button.

DuoTone Secondary Color (DuoTone Icons Only) Supports: Field Connections

Sets the secondary color for DuoTone Font Awesome icons on the button.

Button Icon Position Default: Before Text

Sets whether the icon appears before or after the button label.

  • Before Text: Displays the icon to the left of the button label.
  • After Text: Displays the icon to the right of the button label.
Button Icon Visibility Default: Always Visible

Controls when the button icon is visible.

  • Always Visible: Displays the icon at all times.
  • Fade In On Hover: Shows the icon only when the button is hovered.
Button Padding Supports: Responsive, Link Values

Sets the inner padding of the CTA button.

Button Text Color Supports: Field Connections

Sets the button label color.

Button Text Hover Color Supports: Field Connections

Sets the button label color on hover and focus.

Button Typography Supports: Responsive

The font settings for the CTA button label.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button Background Style Default: Flat

Selects the background fill method for the CTA button.

  • Flat: Uses a solid background color and reveals the background animation setting.
  • Auto Gradient: Generates an automatic gradient from the background color.
  • Advanced Gradient: Uses a custom gradient builder for the button background and hover state. Hides the solid color fields.
Flat Settings
Button Background Color Supports: Field Connections

Sets the solid background color of the CTA button.

Button Background Hover Color Supports: Field Connections

Sets the button background color on hover and focus.

Button Background Animation Default: Disabled

Animates the background color transition on hover when set to Enabled.

  • Enabled: Applies a CSS transition to the background color on hover.
  • Disabled: Changes the background color immediately on hover without animation.
Auto Gradient Settings
Button Background Color Supports: Field Connections

Sets the base color used to generate the automatic gradient.

Button Background Hover Color Supports: Field Connections

Sets the hover color used to generate the automatic gradient on hover.

Advanced Gradient Settings
Background Gradient

Defines the custom gradient applied to the CTA button background.

Background Hover Gradient

Defines the custom gradient applied to the CTA button background on hover.

Button Border Supports: Responsive

Configures the border style, width, color, radius, and shadow for the CTA button.

Button Border Hover Color Supports: Field Connections

Sets the button border color on hover and focus.

Mobile tab
Type (Mobile Photo) Default: Use Main Photo

Selects the photo shown on mobile devices.

  • Use Main Photo: Displays the same background photo used on desktop.
  • Choose Another Photo: Reveals the Photo field to select a different image for mobile.
  • No Photo: Removes the background photo on mobile devices.
Mobile Photo
Photo (Choose Another Photo Only)

Sets an alternative background photo displayed on mobile devices when Type is set to Choose Another Photo.

Content Background Color Default: #333333; Supports: Field Connections

Sets the background color of the content area on mobile devices.

Title Color Default: #ffffff; Supports: Field Connections

Sets the slide heading color on mobile devices.

Text Color Default: #ffffff; Supports: Field Connections

Sets the slide body text color on mobile devices.

Slider Tab​

The Slider tab controls automatic playback, slide order, transition style, and navigation controls.

Auto Play Default: Yes

Enables or disables automatic slide cycling.

  • Yes: Slides advance automatically and reveals the Show Play/Pause setting.
  • No: Slides only advance through user interaction.
Play/Pause Settings
Show Play/Pause Default: No

Shows or hides a play/pause control on the slider when Auto Play is enabled.

  • Yes: Displays a play/pause button on the slider.
  • No: Hides the play/pause button.
Shuffle Default: No

Randomizes the slide order on each page load.

  • Yes: Plays slides in a random order.
  • No: Plays slides in the order they are defined.
Pause On Hover Default: Yes

Pauses automatic slide cycling when the cursor is over the slider.

  • Yes: Pauses the slider while the cursor is over it.
  • No: Continues cycling regardless of cursor position.
Loop Default: Yes

Controls whether the slider returns to the first slide after the last.

  • Yes: Cycles continuously from the last slide back to the first.
  • No: Stops at the last slide.
Delay Default: 5

Sets how long each slide remains visible before advancing, in seconds. The delay should be greater than the transition speed.

Transition Default: Slide

Sets the animation used when moving between slides.

  • Slide: Moves horizontally from one slide to the next.
  • Fade: Fades between slides.
Transition Speed Default: 0.5

Sets the duration of the slide transition animation, in seconds. The transition speed should be less than the delay.

Show Arrows Default: No

Shows or hides previous and next navigation arrows on the slider. Enabling arrows also reveals the Arrows section in the Style tab.

  • Yes: Displays navigation arrows and reveals arrow style settings in the Style tab.
  • No: Hides navigation arrows.
Show Dots Default: Yes

Shows or hides dot navigation indicators below the slider.

  • Yes: Displays a dot indicator for each slide.
  • No: Hides the dot indicators.

Style Tab​

The Style tab controls the slider dimensions, global text and overlay colors shared across all slides, and arrow navigation appearance.

Height Default: 400

Sets the minimum height of the slider in pixels. Slide content expands the height automatically when it exceeds this value.

Max Content Width Default: 1100

Sets the maximum width of the content area within each slide in pixels.

Text Color Default: #ffffff; Supports: Field Connections

Sets a text color shared across all slides. Individual slides also set their own text color defaults.

Text Background Color Supports: Field Connections

Sets a background color applied to the overlay behind text content across all slides. Supports alpha transparency.

Arrows

The Arrows section controls the appearance of slider navigation arrows. This section is available when Show Arrows is set to Yes in the Slider tab.

Arrow Settings
Arrows Background Color Supports: Field Connections

Sets the background color of the arrow navigation buttons. Supports alpha transparency.

Arrows Background Style Default: Circle

Sets the shape of the arrow navigation button background.

  • Circle: Renders the arrow background as a circle.
  • Square: Renders the arrow background as a square.
Arrows Color Supports: Field Connections

Sets the color of the arrow icons.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.