Slider container element
Use the Slider container element to configure the behavior of your slider.
Locating the slider container element
To locate the Slider container element:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Slider container element.
The Slider container includes the following groups of fields:
- Layout style - Apply a Layout custom style to your Slider container.
- Container width - Set the width of the Slider container. Fluid width will fill the parent, Boxed width will fit the width of your grid. Here are some examples.
Bleed and overflow
- Bleed - Set the slides to bleed into gutters or retain gutters. Bleed into gutters will cause the slides to touch. Retain gutters will separate the slides by your gutter width. Here are some examples.
- Overflow hidden - Set the visibility of the slides outside of the slide container to hidden.
- Slides to show - Set the number of slides to show at one time
- Slides to scroll - Set the number of slides to scroll when a user clicks on the slider navigation.
- Starting slide number - Set which slide your slider will start on.
- Center mode - Set the slider to display a slide in the center. This only works with an odd number of slides. Center mode also applies a class .slick-center to the center slide which can be styled to look different to the other slides
- Padding - Set the padding around the center slide
- Variable width - Set the slides to match the width of their content.
- Container height - Set the slider container to the height of the tallest slide or adapt to each slide height.
- Target element - Select which element to target
- Class - Enter a class to target
- Target level - Sets which nested level the match height will target. Expected value: number.
- Show navigation - Show or hide the navigation
- Position outside - The navigation will be positioned outside of the Slider container
- Navigation position - Set the position of the slider navigation.
- Previous style - Select a Custom style for the Previous button
- Next style - Select a Custom style for the Next button
- Previous label - Use text as the slider Previous navigation. Leave blank to not use text
- Next label - Use text as the slider Next navigation. Leave blank to not use text.
- Show pagination - Show or hide the pagination
- Position outside - The pagination will be positioned outside of the Slider container
- Pagination position - Set the position of the pagination.
- Pagination style - Select a Custom style for the Pagination
- Show as numbers - Adds a number to each pagination item.
- Show slide count - Show or hide the slide count
- Position outside - The slide count will be positioned outside of the Slider container
- Count position - Set the position of the slide count.
- Slide count style - Select a Custom style for the slide count
- Enable drag - Allow the slides to be click and dragged
- Enable swipe - Allow the slides to be swiped on touch devices
- Focus on select - This moves the slide in focus to the centre. This only applies if Centre mode is enabled.
You can use one slider to act as the navigation for another slider.
- Slider ID - Enter the ID or Class of the slider to to be synced with.
When using a slider to control another slider you will need to give both sliders their own ID or Class in the Markup tab. For example .slider-nav and .slider-slide. Then enter the Slider ID or Class of the opposite Slider in the Use as navigation section of the Slider container. This will sync the two sliders so when one slides, the other slides too. You also need to apply Focus on select to the Slider being used as the navigation.
- Transition direction - Set the direction of the slide transition
- Loop - Set whether the slides will loop from last to first
- Transition speed - Set the speed of the transition
- Milliseconds - Set if speed of the transition in Milliseconds. This option only shows if Custom is selected in the Transition speed field
- Easing - Set an easing effect on the slide transition
- Cubic - Set the cubic-bezier curve to the easing. Enter four numbers separated with a comma. This option only shows if Cubic-bezier is selected in the Easing field
- Steps - Set the easing to include steps. Enter the number of steps and select the step timing.
- Autoplay - Set the slider to automatically scroll through your slides
- Autoplay speed - Set the time between each slide transition
- Pause on hover - Set if the slider should pause when the user hovers over different parts of the slider.
- Play style - Select a Custom style for the play button
- Play label - Set a visually-hidden label for the play state of the slider
- Pause style - Select a Custom style for the pause button
- Pause label - Set a visually-hidden label for the pause state of the slider
- ARIA label - Set an ARIA label
- Screen reader instructions - Set screen reader instructions for users using screen readers.