Basic Slider

The Basic Slider element in Breakdance allows you to create a customizable and responsive slider for showcasing images, content, and interactive elements. It provides a range of controls for managing slide content, design, transitions, and navigation. With options for autoplay, pagination, and various effects, the Basic Slider is versatile for different use cases.

Content Controls

Content

These controls allow you to customize the content of your slides, including background settings, text, images, and buttons. You can add multiple slides, each with its unique content and styling. Additionally, you have the option to fine-tune how each element appears and behaves within the slider.

• Slides – clone, remove, and reorder slides in your slider.
  • Background – Set the background for each slide.
  • Image – Choose an image for the slide background.
  • Lazy Load – Enable lazy loading for the background image.
  • Size – Define the size of the background image. (This control is only available when an image is set.)
  • Alt – Provide alternative text for the background image.
  • Overlay – Apply a color overlay on the background.
  • Color – Choose a color for the slide background.
  • Title – Add a title to the slide.
  • Text – Add descriptive text to the slide.
  • Button – Configure the button displayed on the slide.
  • Text – Set the text for the slide button.
  • Link – Provide a URL for the button.
• Add Slide – Adds a new slide.
• Title HTML Tag – Select the HTML tag for the slide title.

Design Controls

Size

These controls let you define the dimensions of your slider, including width and height settings. Customize the height specifically or use predefined options. Adjusting these settings ensures your slider fits perfectly within your webpage layout.

• Width – Set the width of the slider.
• Height – Choose a height for the slider.
• Custom Height – Specify a custom height for the slider. (This control is only available when ‘Custom’ height is selected.)

Slider

These controls manage the slider’s overall behavior and style. You can set the transition effects, autoplay settings, and advanced options for a tailored slider experience. These settings help ensure smooth and visually appealing transitions between slides.

Further information about the Slider settings may be found in the Slider Controls documentation.

Slide

These controls affect the layout and alignment of slide content. You can adjust the alignment of children elements, padding, and content width. These settings ensure that your slide content is positioned correctly and looks visually appealing.

• Align Children – Align child elements within the slide. (This control is only available when the flex direction is not set.)
• Vertical Align Children – Vertically align child elements within the slide. (This control is only available when the flex direction is not set.)
• Padding – Set padding for the slide.
• Content Width – Define the width of the slide content.

Typography

These controls allow you to style the text elements within the slider. You can customize the appearance of titles, text, and buttons, ensuring consistency with your website’s typography.

• Title – Configure typography settings for slide titles.
• Text – Configure typography settings for slide text.

Button

These controls manage the appearance and behavior of buttons within the slider. You can style the buttons, set typography, and customize icons. These settings help create visually appealing and functional buttons for user interactions.

• Style – Choose the button style.
• Text – Configure button text settings. (This control is only available when the style is set to ‘Text’.)

Spacing

These controls allow you to manage the spacing around the various elements of your slides. You can set margins and padding to ensure proper layout and visual appeal.

• After Title – Set space after the slide title.
• After Text – Set space after the slide text.
• Container – Configure the container settings for the slide.
  • Margin Top – Set the top margin of the container.
  • Margin Bottom – Set the bottom margin of the container.