NuboCoder – Beaver Builder Carousel

1Overview

NuboCoder – Beaver Builder Carousel adds a fully customizable carousel/slider module to the Beaver Builder page builder, powered by the well-known Slick Carousel JavaScript library.

• Drag-and-drop module inside Beaver Builder — no code required for basic use.
• Fine-grained control over autoplay, arrows, dots, speed, easing, center mode, and more.
• Responsive breakpoints — change any carousel setting at specific browser widths, or disable the carousel entirely below a given width.
• Three ways to populate slides: build items manually with an image, rich text and an optional link; paste raw, sanitized HTML per item; or populate a single item — or the entire carousel — from a WordPress shortcode.

2Requirements & compatibility

The module registers itself automatically once both Beaver Builder and this plugin are active — no separate configuration screen is needed.

3Installation

1. Upload the nubocoder-bb-carousel folder to /wp-content/plugins/, or install the plugin ZIP from Plugins → Add Plugin → Upload Plugin in your WordPress admin.
2. Activate the plugin through the Plugins menu.
3. That's it — the Carousel module now appears inside the Beaver Builder editor, under the NuboCoder category.

4Adding the module to a page

Open any page in Beaver Builder, click the + icon to open the modules panel, and search for "Carousel." You'll find it listed under the NuboCoder category — a second result, "Posts Carousel," is a different, built-in Beaver Builder module, so make sure you pick the NuboCoder one.

Drag it onto your page like any other module.

Once placed, double-click the module (or use its wrench icon) to open its settings panel, which has four tabs: General, Responsive, Items, and Advanced — the last one is Beaver Builder's standard spacing/visibility/animation panel, common to every module, and isn't covered here.

5General settings

5.1 Main

5.2 Additional

6Responsive settings (breakpoints)

The Responsive tab lets you override any of the General settings above at specific browser widths — for example, disabling arrows on mobile, or showing 1 slide instead of 4 on tablets.

1. Set Enable to True.
2. Click Add Breakpoint (or Edit Breakpoint on an existing one).
3. Fill in the breakpoint form.

You can add as many breakpoints as you need by clicking Add Breakpoint again. Slick applies the narrowest matching breakpoint, so list them in the order that makes sense for your layout — largest width to smallest is the easiest to reason about.

7Items — building your slides

The Items tab controls what actually appears inside the carousel.

7.1 Items type: default vs. shortcode

At the top of the Items tab, Items Type decides where your slides come from:

• Default — you build a list of items directly inside this panel. This is what most users will use.
• Shortcode — the entire carousel's content is generated by a single WordPress shortcode you provide instead. Use this when your slides come from a dynamic source: a custom loop, an external feed, a shared shortcode used elsewhere on your site.

With Items Type set to Default, you'll see a repeatable list of items:

Click Add Item to add a new slide, or Edit Item on an existing one to configure it. Each item has its own Type dropdown — Default, Custom HTML, or Shortcode.

Switching Items Type to Shortcode instead replaces that list with a single Shortcode field, where you type the shortcode responsible for the whole carousel:

See Using shortcodes to populate the carousel for exactly what that shortcode needs to output.

7.2 Item type: default

The Default item type is the module's built-in slide layout: an optional image, rich-text content, an optional title (taken from the item's Label), and an optional link.

Turning With Link on reveals a link picker and a set of Link Options you can combine:

You can combine Link Image + Link Title + Link Text, for example, to make several parts of one slide independently clickable — just don't combine any of them with Link Entire Item, since that one already wraps everything.

7.3 Item type: custom HTML

Switching an item's Type to Custom HTML replaces the built-in layout with a code editor where you can write your own markup for that one slide.

This is useful for a one-off slide that doesn't fit the standard image/content/link layout — a styled call-to-action, an embedded form, or hand-crafted markup for a specific design need.

7.4 Item type: shortcode

Switching an item's Type to Shortcode lets a single slide be generated by any WordPress shortcode — yours, or one that comes from another plugin.

Just type the shortcode exactly as you'd use it in a post, including any attributes, e.g. [my_single_slide title="Special Offer"]

8Using shortcodes to populate the carousel

Both the module-level Items Type: Shortcode and the item-level Type: Shortcode work the same way under the hood — the plugin runs your shortcode through WordPress's do_shortcode() and drops the result straight into the carousel. The difference is only in how much of the carousel that shortcode is responsible for:

Example 1 — module-level, populating the whole carousel from your latest posts. Add this to your theme's functions.php or a small custom plugin:

add_shortcode( 'my_custom_slides', function () {
    $out = '';
    $posts = get_posts( array( 'numberposts' => 5 ) );

    foreach ( $posts as $post ) {
        $out .= '<div class="nubocodeer-bb-carousel__item">';
        $out .= '<h3>' . esc_html( get_the_title( $post ) ) . '</h3>';
        $out .= '</div>';
    }

    return $out;
} );

Then on the Items tab, set Items Type to Shortcode and enter [my_custom_slides]. Now the carousel always reflects your latest 5 posts, with no manual editing required when new content is published.

Example 2 — item-level, generating a single slide with an attribute. This matches the [my_single_slide title="Special Offer"] example above:

add_shortcode( 'my_single_slide', function ( $atts ) {
    $atts = shortcode_atts( array( 'title' => '' ), $atts );

    return '<div style="padding:40px;text-align:center;">'
        . '<h3>' . esc_html( $atts['title'] ) . '</h3>'
        . '</div>';
} );

Here you don't need to wrap the output in nubocodeer-bb-carousel__item yourself — since this shortcode is attached to a single item, not the module-level Items Type, the plugin already provides that wrapper.

9Putting it all together

Here's the front-end result of the exact carousel used for the screenshots throughout this guide: three items — one Default, one Custom HTML, and one Shortcode — with Center Mode and Dots both enabled.

Notice how the centered slide (the purple Custom HTML one) is flanked by a partial glimpse of the next slide — that's Center Mode + Center Padding at work, and the two dots underneath come from the Dots setting and the item count.

10Tips & best practices

• Use Slides To Show + Slides To Scroll together. For a "one card moves at a time" feel with several cards visible, set Slides To Show to however many should be visible, and leave Slides To Scroll at 1.
• Center Mode wants an odd number. If slides look off-center, double check Slides To Show is odd (1, 3, 5…).
• Prefer Fade for single-image heroes. If you only ever show one slide at a time, enabling Fade often looks smoother than a horizontal slide.
• Use breakpoints instead of duplicating modules. Rather than building separate carousels for desktop and mobile, use one module and override settings per breakpoint in the Responsive tab.
• The settings panel only updates on Save. As of version 1.0.5, editing a field no longer live-reloads the carousel while you type — the preview refreshes once you click Save, which keeps the editor responsive even with many items.
• Saving one Carousel won't disturb others. If you have multiple Carousel modules on the same page, saving one no longer reinitializes the others.

11Troubleshooting & FAQ

12Changelog highlights

1.0.5

• The settings panel no longer live-reloads the carousel on every keystroke — it updates once, on Save.
• Saving one Carousel module no longer reinitializes every other Carousel on the same page.
• Hardened the module's front-end script output against malformed settings values.
• Fixed the Center Padding unit (px/%) being ignored on the front end.
• Updated the bundled Slick Carousel library.
• Verified compatibility with Beaver Builder up to 2.11.1.

1.0.4 and earlier

See README.txt inside the plugin folder for the full history.

13Support

For questions or custom requirements, contact the plugin's author at zed.1985@gmail.com.