Splider 2 Extensions

Avatar

By Stuart Marshall

updated 3 months ago

Splider stack offers a number of extensions that are available to you to extend what is possible from the default settings. These aren't enabled by default as they all require additional code to be added to the page (albeit a very small and efficient amount of code).

Extensions - Load and apply

In order for any desired extensions to be available to use they must be first 'loaded' (to the page) and then 'applied' (to any instance of Splider stack where you want to use the extension functionality).

There are 5 extensions currently available with Splider stack. Select any that you want to be available.

  1. Auto scroll: this enables the slider to continually scroll in a smooth manner. it differs from autoplay in that it does not pause when a slide becomes active (though it will still pause if hovered over)
  2. Grid: this extension enables you to set out your slides in a grid layout
  3. Video: this extension needs to be activated if you are using the Splider Video slide stack
  4. URL hash: this option allows you to navigate directly to particular slides by utilising a hash value in the url
  5. Intersection: this extension acts as a trigger that allows you to either start or stop certain actions (e.g. autoscroll, autoplay, video) when a slider enters / exits the viewport.

LOAD

The stack options for these are in blue as they are 'page scoped' settings. i.e. if you set these in one Splider stack then the same settings will be pulled into all Splider stacks on that page. This is because checking these boxes loads the extension on to the page and makes them available to all Splider stacks on the page. 

IMPORTANT: As these controls are scoped to the page that they have been activated on, if you move an instance of Splider to a new page you will have to make sure that new page has the required extensions loaded too!

APPLY

Once the required extensions have been loaded to the page you then need to specify which (if any) you want each instance of Splider on the page to apply. The default is for No extensions to be applied but you can opt to apply ALL extensions or Select specific ones.


Extension - Auto scroll

Note: for the Auto scroll settings to be activated the Auto scroll extension stack should be loaded to the page and applied to the desired instance(s) of Splider.

Speed: The speed to the horizontal scroll. Recommended maximum would be around 3 though the optimal speed will differ depending on how many slides are in view at one time.

Pause on hover: Option to have the slider pause if the user hovers their mouse over it (recommended for sliders that have any content within them).

Pause on focus: Option to pause the auto scroll if the slider in question receives focus (i.e. via an interaction or via the keyboard).


Extension - Grid

Note: for the grid settings to be activated the Grid extension stack should be loaded to the page and applied to the desired instance(s) of Splider.

Show grid settings: If enabled then additional settings are activated and shown within the regular Slide setup (and breakpoint) settings groups. For more information about building slider grids please refer to our dedicated grid tutorial.


Extension - Video

This extension works in conjunction with the Splider Video slide type. For the following Video settings to be activated the Video extension stack should be loaded to the page and applied to the desired instance(s) of Splider - i.e. any that make use of the dedicated Splider Video stacks.

Show video controls: This option simply shows / hides the other options in this stack. As there are quite a few settings the default is to have them hidden to save space.

Autoplay: Set this to have the video begin playing when the slide is brought into view / made active. (note: most browsers will also need the following Mute setting to be activated for this to work).

Mute: Have the video muted by default.

Loop: Have the video auto-loop (i.e. repeat and keep repeating when it reaches the end)

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.


Extension - Intersection

Note: for the Intersection settings to be activated the Intersection extension stack should be loaded to the page and applied to the desired instance(s) of Splider.

In view: Action to take when the instance of Splider comes into view in the viewport. Options are: Start autoplay, Pause autoplay, Start auto scroll, Pause auto scroll, Start video, Pause video

Out view: Action to take when the instance of Splider leaves the viewport.  Options are: Start autoplay, Pause autoplay, Start auto scroll, Pause auto scroll, Start video, Pause video

Observe once: This option just activates the In view action one time and triggers no further actions when the slider enters/leaves the viewport.


Extension - URL hash

The URL Hash extension has no settings in the main Splider stack. If you wish to use it make sure it is enabled (loaded and applied) and that the individual slide stacks have been given unique IDs. Find out more about using the URL hash option.

Did this answer your question?