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.
Images
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.
Video
Enable video
If you are adding any of the Splider 'Video slide' stacks then this option needs to be enabled. Once enabled it provides the following controls relating to videos. Note: Some features will not work for Vimeo videos unless you have a Plus, Pro or Business account.
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
Hide UI overlay: You can hide any UI overlay - including the play button with this option
Player options (Advanced): You can add in any additional player options for each player type. These should be added in the following format: playsinline: true, You can use the following links to find the available options for each player type:
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.
