Now Live

Visual Configurators Available — New Animated Elements Coming June 30th Animations June 30th

Get Started
Auto Slider Configurator

How to Use in Breakdance Builder

  1. Customize your slider using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Breakdance Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-slider📋
    with value "true" to your container element
  5. Add the attribute
    data-slide📋
    with value "true" to each slide element inside the container
This tool creates a custom script with your settings built-in. All your slider configurations are included in the generated code! Make sure to set the attribute value to "true" for proper functionality.
Slide 1
Slide 2
Slide 3
Breakfusion Exclusive Get Your Auto Slider Animation

Add elegant animated sliders to your website with this custom-crafted JavaScript snippet.

  • Easy implementation with simple data attributes
  • Fully responsive design that adapts to any container
  • Customizable transition effects and timing
  • Automatic and manual navigation options
  • Works in all modern browsers and devices
Slider Settings
Active Dot Color
Inactive Dot Color
Transition Speed 0.8s
Autoplay Interval 5s
Enable Dragging
Appearance Settings
Slide Width 100%
Active Slide Scale 1
Inactive Slide Scale 0.95
Inactive Slide Opacity 0.5
Enable Edge Fade
Edge Fade Color
Edge Fade Width 15%
Enable Autoplay

JavaScript Code