How to Use Brand Slider in BricksFly

Brand Slider element in BricksFly lets you display brand logos or images in a smooth slider layout. You can control the slider content, autoplay behavior, item spacing, image style, and navigation settings based on your design needs.

Requirment

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

How To Activate Brand Slider in BricksFly

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

Step 1: Add Brand Slider and Configure Content

Click the + icon and use the search bar to find Brand Slider. Once the element appears, select it to add it to the page.

Content

Slide Content: Selects whether the slider content will display as text or images. In this example, Image is selected.

Image List: Allows you to add multiple brand logos or images to the slider. In this example, seven brand logo items are added.

Image Size: Controls the image size used for each brand logo. In this example, the Medium size is selected, but you can choose any available option based on your preference.

Step 2: Configure Slider and Item Settings

Adjust the slider behavior and item layout settings to control how the brand slider moves, displays, and aligns its content.

Slider Option

Slides Per View: Controls how many slides are visible at the same time. In this example, 7 slides are selected, but you can choose fewer or more slides based on your design needs.

Speeds (ms): Controls how fast the slider transition animation runs. In this example, the Speed value is set to 5000.

Autoplay: Enables automatic slider movement without user interaction. Available options include: Default, On, and Off. In this example, the On option is selected.

Autoplay Delay (ms): Controls the waiting time before the next slide appears during autoplay. The value is measured in milliseconds. To create a continuous marquee effect, you can set the value to 0 or 1. However, in this example, no delay value is set.

Loop: Allows the slider to repeat continuously after the last slide. Available options include: Default, On, and Off. In this example, the Off option is selected.

Pause On Hover: Pauses the slider movement when users hover over it. In this example, the option is left at its default setting.

Show Navigation: Shows or hides the navigation arrows. Available options include Default, On, and Off. In this example, On is selected.

Show Pagination: Shows or hides the pagination dots. In this example, the option is left at its default setting.

Reverse Direction: Moves the slider in the opposite direction. In this example, the option remains disabled by default.

Items

Items Alignment: Controls the alignment of the slider items inside each slide. Available options include Left, Center, and Right. In this example, Left is selected. You can choose any available option based on your design needs.

Space Between Items (px): Controls the spacing between each slider item. In this example, it is left unchanged. However, you can add a value based on your preference.

Icon Position: Controls the position of the items within the slider area. Here, the default option is selected.

Space Between Icon and Text: Controls the spacing between the icon and text when both are used. In this example, the field is left blank. Add a value only if you want to customize the spacing.

Step 3: Customize Image and Navigation Styles

Note: Image settings can be customized based on your design needs. In this example, the settings are left unchanged.

Image

Width: Controls the width of each brand image. Here, no value is added.

Height: Controls the height of each brand image. In this example, the field is left empty.

Object Fit: Controls how the image fits inside its defined width and height. Available options include Default, Fill, Contain, Cover, None, and Scale Down. In this example, Fill is chosen,

Background Color: Adds a background color behind each brand image.

Border: Allows you to add and customize a border around the image.

Border Radius: Controls the roundness of the image corners.

Padding: Adds space inside the image area.

Navigation

Note: Navigation settings include preset values by default. You can keep the default values or adjust them based on your design needs. In this example, the default values are applied.

Arrow Color: Controls the color of the navigation arrow icon. In this example, the default color value is set to rgb(54, 54, 54).

Arrow Background: Controls the background color of the navigation arrow. In this example, the default background color is set to rgba(0, 0, 0, 0).

Arrow Size: Controls the size of the navigation arrow.

Arrow Border: Allows you to add and customize a border around the navigation arrow.

Arrow Position

Horizontal Offset: Controls the left or right position of the navigation arrows. Increasing or decreasing the value moves the arrows horizontally based on your layout. In this example, no value is specified.

Vertical Position: Controls the top or bottom position of the navigation arrows. You can adjust this value to place the arrows vertically where they fit best within the slider. For this example, the field is left empty.

Final Results