Splider stack settings

Avatar

By Stuart Marshall

updated 5 months ago

Splider is an extremely powerful slider stack. You can find out about the settings in the article below.

Slider setup

Mode

You can select from the following options:

  • Slide (default) - This option acts as a regular slider. Moving from the first slide to the last.
  • Carousel - This option loops your content. In other words as soon as you get to the last slide the next one will be the first one again.
  • Fade - This option simply fades one slide into the next. Note: With this option you can only have 1 slide visible on the page at a time.

Direction

You can select from the following options:

  • Left to right (default) - New slides will enter from the right.
  • Right to left - New slides will enter from the left.
  • Top to bottom - This stacks the slides vertically and flips the navigation arrows to the top and bottom (and the pagination indicators to the side). NB: In this mode you must set a height value for the slides!

Rewind

This option rewinds back to the first slide once the final slide is reached. This option is ignored when the slider is in carousel mode.

Padding

The padding settings here add some space for the arrows / pagination. If you would rather that these items sat over the slides then you can adjust the values here accordingly.


Autoplay

Enabling Autoplay allows the slider to progress without any interaction required from the user.

If enabled then you can set an interval time value (default is 5 seconds).

Progress bar

You can additionally enable a progress bar that will indicate how long until the next slide / page will be shown. 

There are numerous styling options for the progress bar's colour and height.


Navigation

If you 'Show pagination' then this will add little indicators to the bottom of your slider. It also indicates which is the current page.

If enabled you can change the colours of the indicators. You can also change the shape. e.g. to create dots simply use the same width and height values (e.g. 10px) and have the border radius at least half of that (e.g. 5px).

If you 'Show arrows' then a left and right (or a top and bottom) arrow is shown and can be clicked / tapped to advance or go back. These can be coloured as desired.


Media

Lazy loading

There is the option of adding a Splider Lazy Load Image stack to the slider. If you use these then you also need to select a Lazy Load 'mode' - either nearby or sequential. If you do not select a mode then your images will not display.

Enable cover mode

Cover mode is great for images that have been added using the 'Image slide' stack. These image slides will take up the full space on the slide (regardless of whether the height has been set by content in other slides, a height has been set or a height ratio has been set. If you want to create a consistent looking image slider then this is a great way to do it.

Enable video

If you are adding any of the Splider 'Video slide' stacks then this option needs to be enabled. Once enabled it provides some controls relating to videos:

Autoplay: The video will begin to play when the slide is active. Note: For autoplay to work in many browsers you also need to activate the option to mute!

Mute: You can set the video audio to start muted

Loop: You can set the video to repeat on a loop

Hide controls: You can hide some video control settings by enabling this option

Find out more about using video slides.


Styling

Enable styling

If you wish to style the slides (background colour, border etc) then you need to activate this checkbox. Doing so will reveal a number of additional controls.

Normal and active colours

You can set a background and border colour for both active and inactive states.

Border

You can adjust the border width and border radius by providing values

Switch colour

You can opt to have the colour of any text changed when the slide it is on is active. This is especially useful if you are using very different background colours for inactive and active states. You can choose to have the text colour switch to a light colour (#fff) or to a dark colour (#262626).

Inactive opacity

You can opt to have inactive slides show with a lower opacity / faded out. This will give the active slide more focus.


Setup - Default

The default styling sets up how you want the slider to operate on large screens. If you want a different setup on smaller screens then you can enable 1 or 2 additional breakpoints.

Slides

You can set up how many slides you want to be visible at one time with the 'per PAGE' value. 

You can set up by how many slides you want to advance by with each move by adjusting the 'per MOVE' value.

Centre focus

If you enable centre focus then the active slide will position itself in the centre of the space. 

Trim space

If using centre focus (above) then by default the first (and last) slide will start in the centre, leaving a space at the side. If you would rather there was no space then you can opt to 'trim space'. The first and last slides would then not sit in the centre.

Gap

You can set how much space is between slides by setting a value here.

Padding

You can set padding values for the left and right sides (or for the top and bottom if you are using the top to bottom direction). 

This is a good technique to give a glimpse / sneak peek of slides before and/or after the ones fully in view.

Height

You can set a height for the slides. This is mainly useful when using the top to bottom direction (in fact it is a requirement in this situation!). You may find it useful for other things too. NB: You must add a CSS unit along with the value - e.g. 200px or 30vh etc.

Height Ratio

You can opt to set an aspect ratio for the slider. This is especially useful to give videos and images (using 'cover' mode) a fixed size. Content added to a regular Stacks slide may get cropped if the aspect ratio does not provide enough room. As such it is therefore best used when using media of this type (or with a top to bottom slider). You can also set a custom ratio value. See here for more advice about using Splider's aspect ratio slides.

Alignment

If the content of your slides are different heights then you may want to align the content one way or another (e.g. have content in the vertical centre of the available space). You can adjust the alignment option to best suit your needs.


Breakpoints

Enable breakpoints if you want to adjust the slider settings for SMALLER devices. 

Most of the same settings detailed above are available to set at each breakpoint.

Did this answer your question?