NEW RELEASE
v2.2 - 40+ new elementsWhat's new
Main components

Hero

Cards

Pricing

Header

Features

Testimonial

CTA

Buttons

New

About

Contact

Megamenu

Roadmap

Ready to enhance your Bricks Builder experience?

Access our complete library of professional components.

Explore all categoriesQuick Started

Ready to enhance your Bricks Builder experience?

Add premium elements that enhance user experience.

Quick Started
SureCart components

Product pages

High quality product templates

SureCart UI components

Specific components for Surecart

Ready to enhance your Bricks Builder experience?

Take advantage of these extraordinary features to enrich your customers' websites.

Pricing

Simple, transparent pricing plans

About

Learn about Bricksfusion

ChangeLog

Latest updates and improvements

Roadmap

Find out what's coming to Bricksfusion

Contact

Get in touch with us

Community

Join our facebook community

Quick Started

Discover how easy Bricksfusion is

Ready to enhance your Bricks Builder experience?

Unlock Bricksfusion. Make today your launch day.

Get Started
Auto Slider Configurator - BricksFusion
data-slider

Auto Slider

Interactive sliders for Bricks Builder

How to Use & Code Information
▼
  1. Customize your slider using the controls below
  2. Click Copy JS to copy the JavaScript code to clipboard
  3. In Bricks Builder, add a Code element
  4. Paste or upload the JavaScript code
  5. To add the effect to any section: go to Section → Style → Attributes, add data-slider as attribute name (leave value empty)
  6. Add data-slide attribute to each slide element inside the container
  7. NEW: Configure slides per view to show multiple slides at once (perfect for testimonials, products, etc.)
  8. Enhanced: Full arrow customization and infinite loop prevent empty spaces
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slider Layout
Slides per View ℹ
1
Advance Step ℹ
Gap Between Slides
20px
Navigation Arrows
Show Navigation Arrows ℹ
HEX - Arrow Color
HSL
HEX - Background Color
HSL
Background Opacity ℹ
0.4
Vertical Position ℹ
Distance from Edges ℹ
1rem
Arrow Size ℹ
48px
Show Background Circle ℹ
Navigation Dots
HEX - Active Dot
HSL
HEX - Inactive Dot
HSL
Animation Settings
Transition Speed ℹ
0.6s
Autoplay Interval ℹ
4s
Enable Autoplay ℹ
Enable Dragging ℹ
Advanced Options
Active Slide Scale
1
Inactive Slide Opacity
0.6
Drag Sensitivity
50