No slide transition on Splide.js?

I notice the new dynamic slider doesn’t have a the nice transition between slides when you click the arrows. It just snaps to the next slide immediately. Compared to Swiper, which allows the slide transition on drag or button clicks.

Is this expected behaviour?

Hi @owynter,

Sorry to hear this!
I’m not experiencing this on my side.
Have you set a particular transition duration?

Yes, see below:
Slider screengrab

I think it might just be a limitation of the Splide library.
It’s not the end of the world, but it would be nice if it would slide when the buttons are clicked.

For reference, here’s what Swiper does:
Swiper transition

@owynter could you try to clear your cache and/or hard-refresh the page in your browser?

There is no limitation in that regard and can’t see any, compared to swiper.
You can check some demos here.

The slider on your demo works as intended on my side. When importing the template from the library, there is already a transition applied, so it should work out of the box.

I think you’ve misunderstood.

I have checked their demos and docs. The behaviour I’m looking for just doesn’t seem to be part of the library.

To be clear, I want to see my slides moving left-right when I click on the arrows. This does not happen with Splide. The next slide simply appears in place. The Swiper demo below shows what I was expecting. Splide does this on drag/touch-and-swipe, just not when the buttons are clicked.

it’s a small thing, and not the end of the world. Just a UX nicety.

Yes, that must be the case, since you studied the splide demos and docs and my additional advice didn’t work either.

Could you tell me what exactly you expect to happen here?

Template walk-through (slider starts at 0:27)

That’s definitely unusual as there is a slide transition with Splide.js. Strange you also experience that on their docs.

Could you try this page and tell me if you experience the same?
https://ot-pursuit-noga.instawp.xyz/index.php/2022/12/12/slider/

Did you find some time to explore further @owynter?

Maybe you have a browser extension installed which interferes with the slider or there are actual browser/OS (accessibility) settings enabled which disables the animation/transition?

Really curious where it comes from.

You are misunderstanding. Unless all my browsers are causing a problem.
There’s no transition on button click.

Seems something is terribly wrong with my setup. Tried on all my browsers: Chrome, Edge, FF (both), Brave, Vivaldi, Opera. It would seem there’s something else at play here.

https://drive.google.com/file/d/1olzMwmz_FTDx2XOhm3PCI4kHdHDJ-Fa-/view

I’m running Win10 Home, for whatever that’s worth.

@owynter Transition works fine on my end too on the URL shared by Louis. Slider – cwiclydemo

Are you checking on the same URL? It will help to confirm if the issue is related to your Cwicly site or some app on the desktop level interfering within your browsers.

Yeah. I just think there’s something with my computer that’s preventing this. Possibly a graphic driver or something. It is baffling.

Glad I could help :smiling_face_with_tear:

3 Likes

@Marius I think that is it. Disabling the animations in the Windows setting disable all transitions. I guess that is ticked off for @owynter

3 Likes

Seems like Splide does respect accessibility settings, while Swiper doesn’t, @dranzer.
Anyway, something learned here. And that’s my final reply in this thread here.

2 Likes

That was it. Thanks @Marius.
Very interesting. And yes, that’s interesting about accessibility. it’s not something I’d ever really thought about but, if a user set up those settings on their computer, it’s something for developers to pay attention to.

I was under the impression those accessibility settings in Windows are restricted to WinApps and WinUI. It is nice to know it covers everything. Splide is doing an amazing job on accessibility front and overall. Splide dev is also working on v5 version. Very passionate and committed dev like Louis. Commits · Splidejs/splide · GitHub