Skip to content
Bricks Academy
Get Bricks

Slider (nestable)

The Nestable Slider element allows creating sliders with drag-and-drop nesting in the builder, using the Splide library.

Settings

Section titled “Settings”
  • Children (nestable) - Drag and drop elements to create slider slides.

Options

Section titled “Options”

  • Options type (select) - Use default settings or provide custom JSON options. Options: default, custom.

  • Custom options (code) - JSON configuration for Splide slider. Only shown when options type is custom. Provide your own options in JSON format (learn more).

  • Type (select) - Slider behavior. Options: loop, slide, fade. Default: loop.

  • Direction (select) - Slide direction. Options: left to right, right to left, vertical. Supports breakpoints.

  • Keyboard (select) - Keyboard navigation. Options: off, focused, global. Default: global. Supports breakpoints.

  • Auto height (checkbox) - Adjust height to content. May cause layout shift. Using “Auto height” might lead to CLS (Cumulative Layout Shift).

  • Height (number with units) - Fixed slider height. Default: 50vh. Not available when auto height is enabled. Supports breakpoints.

  • Spacing (number with units) - Gap between slides. Default: 0. Supports breakpoints.

  • Start index (number) - Initial slide index. Default: 0.

  • Items to show (number) - Number of slides visible at once. Default: 1. Supports breakpoints. Not available for fade type.

  • Items to scroll (number) - Number of slides to scroll at once. Default: 1. Supports breakpoints. Not available for fade type.

  • Speed in ms (number) - Transition speed. Default: 400. Supports breakpoints.

  • Focus (number) - Determines which slide should be active if the carousel has multiple slides in a page. Number/“center”. Supports breakpoints.

Autoplay

Section titled “Autoplay”

  • Autoplay (checkbox) - Enable automatic slide progression.

  • Pause on hover (checkbox) - Pause autoplay when hovering over slider.

  • Pause on focus (checkbox) - Pause autoplay when slider is focused.

  • Interval in ms (number) - Time between slides. Default: 3000.

Rewind

Section titled “Rewind”

Available when type is not “loop”:

  • Rewind (checkbox) - Enable rewind functionality.

  • Rewind by drag (checkbox) - Allow rewinding by dragging.

  • Speed in ms (number) - Rewind transition speed.

Slide

Section titled “Slide”

  • Padding (spacing) - Padding inside slides.

  • Align horizontal (align-items) - Horizontal alignment of slide content. Options: flex-start, center, flex-end.

  • Align vertical (justify-content) - Vertical alignment of slide content. Options: flex-start, center, flex-end, space-between, space-around.

  • Background (background) - Background styling for slides.

  • Border (border) - Border styling for slides.

Arrows

Section titled “Arrows”

  • Show (checkbox) - Display navigation arrows.

  • Height (number with units) - Arrow button height. Default: 50px.

  • Width (number with units) - Arrow button width. Default: 50px.

  • Background (color) - Arrow button background color.

  • Border (border) - Arrow button border styling.

  • Color (color) - Arrow icon color.

  • Size (number with units) - Arrow icon size.

  • Text shadow (text-shadow) - Text shadow for arrow icons.

Disabled

Section titled “Disabled”

  • Background (color) - Background color for disabled arrows.

  • Border (border) - Border styling for disabled arrows.

  • Color (color) - Icon color for disabled arrows.

  • Opacity (number) - Opacity for disabled arrows (0-1).

Prev arrow

Section titled “Prev arrow”

  • Prev arrow (icon) - Custom icon for previous arrow.

  • Top (number with units) - Top position. Default: 50%.

  • Right (number with units) - Right position.

  • Bottom (number with units) - Bottom position.

  • Left (number with units) - Left position.

  • Transform (transform) - CSS transform for previous arrow.

Next arrow

Section titled “Next arrow”

  • Next arrow (icon) - Custom icon for next arrow.

  • Top (number with units) - Top position. Default: 50%.

  • Right (number with units) - Right position.

  • Bottom (number with units) - Bottom position.

  • Left (number with units) - Left position.

  • Transform (transform) - CSS transform for next arrow.

Pagination

Section titled “Pagination”

  • Show (checkbox) - Display pagination dots. Default: enabled.

  • Margin (spacing) - Margin around pagination dots. Default: 5px on all sides.

  • Height (number with units) - Dot height. Default: 10px.

  • Width (number with units) - Dot width. Default: 10px.

  • Color (color) - Dot color and background color.

  • Border (border) - Border styling for dots.

Active

Section titled “Active”

  • Height (number with units) - Height for active dot.

  • Width (number with units) - Width for active dot.

  • Color (color) - Color for active dot.

  • Border (border) - Border styling for active dot.