About
The Slider layout presents your data in a horizontal or vertical carousel, making it an ideal choice for showcasing highlights, featured courses, or any content intended to capture user attention.
While the Slider uses the same card-based visual logic as the Grid, it adds a wide array of motion and interactive settings. This allows administrators to create dynamic, space-saving displays that users can browse through manually or view via automated transitions.
Available settings in Layout preferences
The Slider layout includes extensive configuration options in addition to the general layout settings:
Search box – Enable a dedicated search input to filter the slider items.
Sorting – Allow users to change the sort order.
Autoplay – Enable automatic transitions between slides.
Autoplay speed (ms) – Define the duration in milliseconds between automatic slide transitions.
Show arrows – Display navigation buttons on the sides of the slider.
Center mode – Focus the active slide in the center of the block, allowing the previous and next slides to be partially visible on the sides.
Center padding (px) – Define the visibility of adjacent slides by adding padding in pixels when in center mode.
Show dots – Display navigation dots at the bottom of the slider.
Draggable – Allow users to move between slides by clicking and dragging.
Fade – Enable a fade effect on slide transition.
Infinite loop – Enable the slider to loop back to the first item after the last slide.
Rows – Set the number of rows displayed within the slider.
Slides per row – Set the number of slides shown per individual row.
Slides to show – Define how many slides are visible at one time.
Slides to scroll – Define how many slides are moved during a single transition.
Transition speed (ms) – Set the speed of the slide animation in milliseconds.
Swipe to slide – Enable touch-friendly swiping to navigate between items.
Variable width – Allow slides to have different widths based on their content.
Vertical – Change the slider orientation from horizontal to vertical.
Vertical swiping – Enable swiping functionality specifically for vertical layouts.
Styling options
Select a custom field from your data source to be applied as a CSS class to the slider items. Note that you must create the CSS styles yourself, as Dash does not provide predefined styles for this field.
Available settings in Fields preferences
Selecting the Slider layout provides a fixed-slot mapping system within the Fields preferences. This system allows you to assign specific data fields to predefined areas of the content card:
Background image – Choose a field to serve as the card's background image.
Image URL field – Define the image used as a link in each card.
Image overlay field – Text to be displayed directly over the background image with a solid background.
Subheading field – A smaller text area above the main heading.
Heading field – The primary title of the card.
Body fields 1 to 3 – Up to three distinct areas for more information.
Footer fields (Left/Right) – Specific slots at the bottom of the card.
Note: The specific fields available for selection are determined by the data source assigned to the block.