Use the Slider container element to configure the behavior of your slider.

Locating the slider container element

To locate the Slider container element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Slider container element.

The Slider container includes the following groups of fields:

Custom style

• Layout style - Apply a Layout custom style to your Slider container.

Width

• 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 and scroll

• 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

• Starting slide number - Set which slide your slider will start on.

Center mode

• 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

• Variable width - Set the slides to match the width of their content.

Slider container height

• Container height - Set the slider container to the height of the tallest slide or adapt to each slide height.

Match heights of children

• 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.

Navigation visibility

• 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.

Navigation style

• 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.

Pagination visibility

• 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

• Pagination style - Select a Custom style for the Pagination
• Show as numbers - Adds a number to each pagination item.

Slide count visibility 

• 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 

• Slide count style - Select a Custom style for the slide count

Drag and swipe

• Enable drag - Allow the slides to be click and dragged
• Enable swipe - Allow the slides to be swiped on touch devices

Focus on select

• Focus on select - This moves the slide in focus to the centre. This only applies if Centre mode is enabled.

Use as navigation

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.

Transition

• 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

• 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

• 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.

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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Slider container element.

The Slider container includes the following groups of fields:

Custom style

• Layout style - Apply a Layout custom style to your Slider container.

Width

• 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 and scroll

• 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

• Starting slide number - Set which slide your slider will start on.

Center mode

• 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

• Variable width - Set the slides to match the width of their content.

Slider container height

• Container height - Set the slider container to the height of the tallest slide or adapt to each slide height.

Match heights of children

• 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.

Navigation visibility

• 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.

Navigation style

• 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.

Pagination visibility

• 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

• Pagination style - Select a Custom style for the Pagination
• Show as numbers - Adds a number to each pagination item.

Slide count visibility 

• 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 

• Slide count style - Select a Custom style for the slide count

Drag and swipe

• Enable drag - Allow the slides to be click and dragged
• Enable swipe - Allow the slides to be swiped on touch devices

Focus on select

• Focus on select - This moves the slide in focus to the centre. This only applies if Centre mode is enabled.

Use as navigation

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.

Important

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. 

Transition

• 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

• 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

• 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.