Custom style

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.

Navigation visibility

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.

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.

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.

Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.