Skip to main content
Version: Beaver Builder 2.11

Posts Carousel

Use Posts Carousel to display a sliding carousel of WordPress posts with configurable layout, content, and slider controls.

Usage​

Use Posts Carousel to display queried WordPress posts in a horizontal sliding carousel built on bxSlider. The module renders each post as a slide that can include the featured image, post title, post info such as author and date, post content or excerpt, an optional more link, and an optional icon. Slider behavior, autoplay, transition direction, navigation arrows, dots, and play/pause controls are all configured per instance.

Use Posts Carousel on home pages, blog landing pages, and template parts that need to surface multiple posts in a compact area. It fits featured-content sections, related-post strips, product or portfolio highlights driven by a custom post type, and any layout where a static grid takes up too much space.

Module Settings​

The Posts Carousel module settings control the slider behavior, the post query, the layout of each slide, and the styling of the carousel items, text, and navigation arrows.

Slider Tab​

The Slider tab configures the carousel layout, autoplay, transition behavior, and slider controls.

Layout Default: Grid

Selects the visual layout used for each slide.

  • Grid: Renders each post as a card with the featured image, title, info, and content stacked. This layout exposes the Content section, Post Content style section, and More Link style section.
  • Gallery: Overlays the post title and info on top of the featured image with a hover transition. This layout exposes the Icons section and the Post Hover Transition field.
Auto Play Default: Yes

Starts the carousel automatically on page load. Options are Yes and No.

Loop Default: No

Continues the carousel from the first slide after the last slide. Options are Yes and No.

Delay Default: 5

The delay between slide transitions, in seconds.

Transition Direction Default: Right To Left

Sets the direction the carousel slides.

  • Right To Left: Advances slides toward the left.
  • Left To Right: Advances slides toward the right.
Transition Speed Default: 1

The duration of the transition animation between slides, in seconds.

Slider Controls

The Slider Controls section configures the navigation elements shown with the carousel.

Slider Controls
Show Dots Default: Yes

Shows or hides the pagination dots beneath the carousel.

Show Arrows Default: No

Shows or hides the previous and next arrows on the sides of the carousel. Setting this to Yes reveals the Nav Arrows section in the Style tab.

Show Play/Pause Default: No

Shows or hides a play and pause control for the carousel.

Layout Tab​

The Layout tab controls how many posts appear, how each slide is sized and spaced, and what content each slide includes.

Posts

The Posts section controls the number of slides, slide sizing, and the per-slide hover transition used for the Gallery layout.

Posts
Number of Posts Default: 10

The total number of posts to load into the carousel.

Number of Posts to Move Default: 1

The number of slides advanced on each transition.

Post Max Width Default: 300

The maximum width of each slide, in pixels.

Post Spacing Default: 30

The horizontal space between slides, in pixels.

Equalize Column Heights (Grid Only) Default: No

Forces all visible slides to share the same height. This field appears when Layout is set to Grid.

Post Hover Transition (Gallery Only) Default: Fade

The animation used when hovering each slide in the Gallery layout.

  • Fade: Fades the overlay in on hover.
  • Slide Up: Slides the overlay up into view.
  • Slide Down: Slides the overlay down into view.
  • Scale Up: Scales the overlay up into view.
  • Scale Down: Scales the overlay down into view.
Featured Image

The Featured Image section controls whether each slide displays the post's featured image and how the image is sized and cropped.

Featured Image
Image Default: Show

Shows or hides the featured image on each slide. Setting this to Show reveals the Size and Crop fields.

Image Settings
Size Default: medium

The registered WordPress image size used for the featured image.

Crop Default: Landscape

The crop ratio applied to the featured image.

  • None: Uses the original aspect ratio from the selected size.
  • Landscape: Crops to a wide landscape ratio.
  • Panorama: Crops to a wider panoramic ratio.
  • Portrait: Crops to a tall portrait ratio.
  • Square: Crops to a 1:1 square.
  • Circle: Crops to a 1:1 square and applies a circular mask.
Icons (Gallery Only)

The Icons section adds an optional icon to each slide. This section appears when Layout is set to Gallery.

Icons
Use Icon for Posts Default: No

Shows or hides an icon on each slide. Setting this to Yes reveals the icon configuration fields.

Icon Settings
Post Icon Supports: Field Connections

The icon displayed on each slide.

Post Icon Position Default: Above Text

The position of the icon relative to the post text.

  • Above Text: Places the icon above the title and info.
  • Below Text: Places the icon below the title and info.
Post Icon Size Default: 24

The size of the icon, in pixels.

Post Info

The Post Info section controls the author and date metadata shown on each slide.

Post Info
Author Default: Show

Shows or hides the post author on each slide.

Date Default: Show

Shows or hides the post date on each slide. Setting this to Show reveals the Date Format field.

Date Format
Date Format Default: Default

The format used for the post date. Default uses the WordPress site date format. The remaining options are PHP date formats such as M j, Y, F j, Y, m/d/Y, m-d-Y, d M Y, d F Y, Y-m-d, and Y/m/d.

Content (Grid Only)

The Content section controls the post content and more link shown on each slide. This section appears when Layout is set to Grid.

Content
Content Default: Hide

Shows or hides the post excerpt on each slide. Setting this to Show reveals the Content Length field and the Post Content section in the Style tab.

Content Length
Content Length

The maximum number of words shown in the excerpt. Leave empty to use the WordPress default excerpt length.

More Link Default: Hide

Shows or hides a read-more link below the excerpt. Setting this to Show reveals the More Link Text field and the More Link section in the Style tab.

More Link Text
More Link Text Default: Read More

The text displayed on the more link.

Style Tab​

The Style tab controls colors and typography for the slide background, post title, post info, post content, more link, and navigation arrows.

Carousel Item

The Carousel Item section sets the slide background and the icon colors used in the Gallery layout.

Carousel Item
Background Color Default: #ffffff; Supports: Field Connections

The color applied to the overlay behind the text on each slide.

Icon Color (Gallery Only) Supports: Field Connections

The color of the post icon. This field appears when Layout is set to Gallery and Use Icon for Posts is set to Yes.

DuoTone Icon Primary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the primary color applied to the icon.

DuoTone Icon Secondary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the secondary color applied to the icon.

Post Title

The Post Title section styles the post title text on each slide.

Post Title
Color Supports: Field Connections

The color of the post title.

Hover Color (Grid Only) Supports: Field Connections

The color of the post title on hover and focus. This field appears when Layout is set to Grid.

Typography Supports: Responsive

The font settings for the post title.

Typography settings

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

Post Info

The Post Info section styles the author and date text on each slide.

Post Info
Color Supports: Field Connections

The color of the post info text.

Link Color (Grid Only) Default: #cccccc; Supports: Field Connections

The color of links inside the post info, such as the author link. This field appears when Layout is set to Grid.

Link Hover Color (Grid Only) Default: #ffffff; Supports: Field Connections

The color of post info links on hover and focus. This field appears when Layout is set to Grid.

Typography Supports: Responsive

The font settings for the post info text.

Typography settings

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

Post Content (Grid Only)

The Post Content section styles the excerpt text on each slide. This section appears when Layout is set to Grid and Content is set to Show.

Post Content
Color Supports: Field Connections

The color of the post content text.

Link Color Supports: Field Connections

The color of links inside the post content.

Link Hover Color Supports: Field Connections

The color of post content links on hover and focus.

Typography Supports: Responsive

The font settings for the post content text.

Typography settings

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

More Link (Grid Only)

The More Link section styles the read-more link on each slide. This section appears when Layout is set to Grid and More Link is set to Show.

More Link
Color Supports: Field Connections

The color of the more link text.

Hover Color Supports: Field Connections

The color of the more link on hover and focus.

Typography Supports: Responsive

The font settings for the more link text.

Typography settings

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

Nav Arrows

The Nav Arrows section styles the previous and next arrow controls. This section appears when Show Arrows is set to Yes in the Slider tab.

Nav Arrows
Arrows Background Color Supports: Field Connections

The background color of the arrow controls.

Arrows Background Style Default: Circle

The shape used behind each arrow.

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

The color of the arrow icons.

Query Tab​

The Query tab configures the data source used to populate the carousel.

Source Default: Custom Query

Selects whether the carousel runs its own query or inherits the main page query.

  • Custom Query: Builds a query inside the module using the Custom Query and Filter sections below.
  • Main Query: Reuses the main WordPress query for the current page, such as an archive or search results page.
Custom Query

The Custom Query section configures the query used when Source is set to Custom Query.

Custom Query
Post Type Default: Post

Selects one or more post types to query for the carousel.

Ordering settings

Ordering settings control how queried posts or items are sorted, such as by date, title, menu order, or custom ordering options where available.

Offset Default: 0

Skips the specified number of posts that match the query before returning results.

Exclude Current Post Default: No

Excludes the post being viewed from the carousel results. Useful in single templates that show related posts.

Filtering settings

Filtering settings control which posts, terms, authors, or content types are included or excluded from the module output.

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.