How to Use Video Box Slider in Bricks Builder Using BricksFly

Video Box Slider Element lets you display multiple videos in an interactive slider with thumbnails, titles, and playback controls. You can configure the video button, adjust slider behavior, and customize navigation, pagination, spacing, and transition settings.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Video box Slider in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under Video, toggle on Video Box Slider.

Step 1: Configure the Video Slides

Video Slides: Allows you to add, remove, duplicate, reorder, and manage the video items displayed in the slider.

+ Add Item: Adds a new video slide. After adding an item, click it to configure its video, thumbnail, title, and other available content. For this example, five items are added.

After adding the items, click each item to add an image, title, and video link.

Title HTML Tag: Selects the HTML tag used for the title of each video slide, such as H2, H3, H4, or another available tag. Choose the tag based on your page heading structure.

Image Size: Selects the image resolution used for the video thumbnail, such as thumbnail, medium, large, or full size. A suitable image size helps maintain visual quality without loading an unnecessarily large file.

Thumbnail After: Controls how many thumbnail items appear after the currently active thumbnail. Increasing the value can keep more upcoming video thumbnails visible within the thumbnail navigation.

Slider Max Width: Sets the maximum width of the Video Box Slider. The slider will not expand beyond this value, even when more space is available on the page.

Step 2: Configure the Video Button

Text: Sets the text displayed inside or beside the video button, such as “Play Video” or “Watch Now.”

Icon: Selects the icon displayed within the video button. A play icon is commonly used to indicate that clicking the button will start the video.

Icon Spacing: Controls the space between the button icon and its text.

Active Ripple: Enables or disables the animated ripple effect around the video button. When enabled, the ripple animation helps draw attention to the play button.

Ripple Color: Sets the color of the ripple animation displayed around the button.

Active Spinner: Enables or disables a loading spinner when the video is being opened or loaded. This gives visitors visual feedback while the video content is preparing. In this example, Active Spinner is disabled.

Display: Controls how the video button is displayed within the layout, such as inline, block, or another available display option.

Step 3: Adjust the Slider Options

Slides to Show: Sets the number of video slides displayed at the same time. You can use responsive settings to show different numbers of slides on desktop, tablet, and mobile devices. In this example, Slides to Show is set to 3.

Autoplay: Automatically moves the slider to the next video slide without requiring visitor interaction. In this example, the option is enabled, but you can enable or disable it based on your requirements.

Allow Touch Move: Allows visitors to move between slides by swiping on touch devices or dragging with a mouse. When disabled, visitors must use the navigation arrows or pagination controls. In this example, the option is disabled.

Loop: Continuously repeats the slides. After the final slide, the slider returns to the first slide without stopping. For this example, the Loop setting is enabled.

Mousewheel: Allows visitors to move between slides using the mouse wheel or trackpad scrolling gesture while the pointer is over the slider. For this example, the option is disabled.

Animation Speed (ms): Controls how long the transition between slides takes, measured in milliseconds. A lower value creates a faster transition, while a higher value creates a slower transition. In this example, the animation speed is set to 300 ms.

Space Between: Sets the amount of space between each video slide, measured in pixels. In this example, the spacing is set to 20 px.

Navigation: Displays or hides the previous and next arrow buttons used to move between video slides. For this example, the Navigation setting is enabled.

Previous Arrow Icon: Selects the icon used for the previous-slide navigation button. In this example, the option is left unchanged.

Next Arrow Icon: Selects the icon used for the next-slide navigation button. For this example, the option remains unchanged.

Pagination: Displays or hides pagination controls that show the current slider position and allow visitors to move directly to another slide. For this example, the option is enabled.

Pagination Type: Selects the visual format used for pagination. Depending on the available options, this may include bullets, Fractions, and a progress bar. In this example, the pagination type is set to Bullets.

Direction: Sets the direction in which the slider moves, such as left or right. For this example, the direction is set to Left.

Center Slide: Places the active slide in the center of the slider instead of aligning it to the beginning. This can make the selected video more visually prominent. For this example, the option is disabled.

Final Result