Slider module introduction

To find the Slider module, Please go to “Pages > Add New”, click “BM Content Builder”

The Slider module supports classic slider, tab slider, carousel slider, and Before/After

Classic Slider

Select the 1st of Style – Classic Slider,

Add image

click Add Slide, click Add new image upload image the current slide. Please keep on click Add Slide to add new slide item.

You could set Title, Caption, Arrow, and Page number show or hide. Set the style, color, spacing, and size.

You could define the slider elements color(Text, Number, Arrow) for each slide item.

You could also define the Logo or Menu color(Default or Alternative) of each slide item what it is for the a hero Slider normally. To make it works, please enable “Content From Page Top” and “Transparent Header Background” in the Page options, place the Slider as at the top of this page.

check how the Logo & Menu color works on above video

PS: Please config the Logo & Menu Default and Alternative color value in the Theme Option:

Slide height

You could define the Slider height:

If you set “100% of Screen Height”, the Slider will be the same height with the viewport. You could create a fullscreen hero slider with fullwidth layout.

If you active “Screen Height Minus Header and Footer”. There is not scrollbar if there is other elements in this page. The option will shown with “100% of Screen Height” is selected only.

The “Fit Image to Container” option is enable. The slider image will fit instead of fill into container.

You could set showing/font/align/spacing for slider title/caption.

Text position:

The “Text under Image” is added from BM Builder v3.6.8

Slider arrow

You could set showing/uploading/size/position/spacing for slider arrow.

The Padding on Left/Right can be set with negative value, the arrow will be out of the image.

You could set showing/font/position/spacing for slider pagenumber.

Custom Mouse Cursor

It is for customize the mouse cursor on the slider Next/Prev navigation. If the “Show Arrow” is disable, the “Custom Mouse Cursor” is shown(this option was same as “Arrow Go with Cursor”, it was moved out from “Arrow position” SEA version 1.3.2) You could upload the 2 images to replace the mouse cursor.

Notice: If the mouse cursor is not shown, please check if the uploaded images size is less than 128 x 128px. Please make sure there is width and height value in SVG source code if you upload SVG format images(how to edit a SVG image file), like: <svg width="72" height="72" ...>..</svg>

Elements Spacing

The padding/spacing for the slider elements:


You could set animation for the slider.

If you want to set the Fadein/out animation time, please use the custom CSS:

/*default is 900*/
.owl-carousel .fadeOut{
  -webkit-animation-duration: 300ms;   animation-duration: 300ms;

Enable Mousewheel

If you enable this option, the visitors can navigate the slider by the mousewheel.

Show Scroll-down Button

If this option is enabled, there is a scroll-down button will be shown. When the button is clicked, The page will scroll through this group. There is the same option in the Group module, you could check the guide here.

Tab Slider

You could set the tab text style.

The padding/spacing for the tab text:

Align: you could set the Text area position on the slider: left/right/center/bottom left/bottom right

Highlight Effect for Activated Text: You could set the underline for the activated text

Text Display Inline: The text will be shown inline if you enable the option. check demo.

Enable Mask above Image: There will be a translucency dark color masked above the image if you enable the option.

Enable Ken Burns: There will be Ken Burns animation effect if you enable the option.

Mask Color: Set the mask color.

Transparent for Mask: Set the opacity value for the mask.

You could set the arrow position.

Before / After

The Before&After options were add from BM content builder version 3.14, check how to create a Before/After here.

It is possible to add like for Classic(1st style) and Tab slider(2nd style) layout. To open a URL when clicking a slider image, please active “Enable link”. 
Please go to “Media Library” to enter the URL for the image:

Quick creating

You could create a slider quickly by “Insert template“:

Was this article helpful?

Related Articles