Splider scrolling

Splider is such an amazing stack (and much of the magic is all down to its customisation options, and integration with Source). Every day I’m finding new uses for it.

For a while I’ve been thinking ‘wouldn’t it be amazing if Splider could do horizontal scrolling, like Joe’s Horizon’ (which I have, and love, but doesn’t provide the same level of integration as Splider does). Only yesterday I realised that it already does this (with ‘drag’ enabled)! However… while it swipes effortlessly on touch devices, it needs to click-drag on desktop. Is there a way to disable the need for a click on desktop? (I looked at the Splidejs API documentation, but left none the wiser).

Hi @jamessouttar -

Not sure how you would trigger the sliding action without a click-drag? there’s no way for it to allow a horizontal scroll if that is what you are meaning.

The Splide documentation is the right place to look for this kind of thing. The drag option is what we are talking about. The other drag / flick related options aren’t included in the stack but they can be added by passing them in as ‘Data attributes’ in the Advanced setting section of Splider. It might be worth experimenting with them. e.g. you could add the likes of "swipeDistanceThreshold":1000,"flickMaxPages":2 to adjust those settings.

EDIT: In fact you could maybe try adding this CSS though it may have some unintended consequences:
.splide__track {overflow-x: scroll;}. Would possibly want to disable the drag option with this.

1 Like