Application Launcher

Docs

Site Studio

Slider container element

Site Studio

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:

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

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:

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.

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.

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.

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

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:

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

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.

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.

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

Important

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Slider container element

Locating the slider container element

Custom style

Width

Bleed and overflow

Slider container element

Locating the slider container element

Custom style

Width

Bleed and overflow

Slides to show and scroll

Starting slide

Center mode

Variable width

Slider container height

Match heights of children

Navigation visibility

Navigation style

Pagination visibility

Pagination style

Slide count visibility

Slide count style

Drag and swipe

Focus on select

Use as navigation

Transition

Easing

Autoplay

Did not find what you were looking for?

Slider container element

Locating the slider container element

Custom style

Width

Bleed and overflow

Slides to show and scroll

Starting slide

Center mode

Variable width

Slider container height

Match heights of children

Navigation visibility

Navigation style

Pagination visibility

Pagination style

Slide count visibility

Slide count style

Drag and swipe

Focus on select

Use as navigation

Transition

Easing

Autoplay

Did not find what you were looking for?