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 overall behavior and style of the slider. 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.
- Settings – Access and configure slider settings.
- Effect – Choose the transition effect between slides.
- Coverflow – Adjust the coverflow effect settings. (This control is only available when the effect is set to ‘Coverflow’.)
- Shadow – Toggle shadow for the coverflow effect.
- Depth – Set the depth of the coverflow effect.
- Rotate – Adjust the rotation of the coverflow effect.
- Stretch – Modify the stretch of the coverflow effect.
- Speed – Control the speed of slide transitions.
- Infinite – Enable or disable infinite looping of slides.
- Center Slides – Center the slides within the slider. (This control is only available when infinite looping is enabled.)
- Autoplay – Set the slider to autoplay.
- Autoplay Settings – Configure settings for autoplay. (This control is only available when autoplay is enabled.)
- Speed – Set the speed for autoplay transitions.
- Stop On Interaction – Pause autoplay on user interaction.
- Pause On Hover – Pause autoplay when hovering over the slider.
- Advanced – Access advanced slider settings.
- Swipe On Scroll – Enable swipe interaction with scroll.
- Auto Height – Automatically adjust slider height based on content.
- Between Slides – Set spacing between slides.
- Slides Per View – Determine how many slides are visible at once. (This control is only available when the effect is not ‘Flip’ or ‘Fade’.)
- Initial Slide – Set the initial slide to be viewed.
- One Per View At – Set a breakpoint where only one slide is visible.
- Slides Per Group – Set how many slides are grouped together.
- Disable Keyboard Controls – Disables the ability to control the Slider with a keyboard.
- Play Animation On – Choose if animations within a slide start when the transition starts or when the transition ends.
- Arrows – These controls customize the slider navigation arrows. You can enable or disable arrows, adjust their appearance, and set custom icons. These settings help users navigate through the slides easily and improve the overall user experience.
- Disable – Toggle the visibility of navigation arrows.
- Color – Choose a color for the arrows. (This control is only available when arrows are enabled.)
- Size – Set the size of the arrows. (This control is only available when arrows are enabled.)
- Overlay – Enable arrow overlay on slides. (This control is only available when arrows are enabled.)
- Space To Slides – Adjust space between arrows and slides. (This control is only available when arrows are enabled.)
- Space To Edge – Set space between arrows and the edge of the slider. (This control is only available when arrows are enabled.)
- Custom Icons – Use custom icons for arrows. (This control is only available when arrows are enabled.)
- Next – Set the icon for the ‘Next’ arrow.
- Previous – Set the icon for the ‘Previous’ arrow.
- Pagination – These controls manage the pagination style and settings of the slider. You can choose from various pagination types, customize their appearance, and adjust their positioning. This enhances user navigation and provides visual indicators of slide progression.
- Type – Select the pagination type.
- Bullets – Configure bullet pagination settings. (This control is only available when the type is not ‘Progress Bar’, ‘Fraction’, or ‘None’.)
- Color – Choose a color for pagination bullets.
- Size – Set the size of pagination bullets.
- Space Between – Adjust space between pagination bullets.
- Radius – Set the border radius for pagination bullets.
- Fraction – Configure fraction pagination settings.
- Progress Bar – Configure progress bar pagination settings. (This control is only available when the type is ‘Progress Bar’.)
- Background – Set the background color for the progress bar.
- Progress – Set the progress color for the progress bar.
- Height – Adjust the height of the progress bar.
- Position – Set the position of the progress bar.
- Overlay – Enable pagination overlay on slides. (This control is only available when the type is not ‘None’.)
- Margin – Set margin around the pagination. (This control is only available when the type is not ‘None’.)
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.
