Splide JS - code custom problem

Hello guys,

I do not succeed to write the correct code to get the same slider as the screenshot.

My code :

The model :

Do you have any idea of my mistake ? :)

Thanks !


Here is my site Read-Only: W.A.R.D - Experts en Design et Rénovation Immobilière Haut de Gamme

hi @Camille_Di_Vincenzo1 you should set on yous splide__track overflow: hidden. Another thing you can revisit is that you have set Splide perPage: 3.2 instead 3 or 2

Awesome, thank you Stan !!!

Do you know also why I have a glitch under the carousel when i click on an arrow?

I have 3 dots appearing under the first slide…

hi @Camille_Di_Vincenzo1 I have noticed it but didn’t check it why this happened. Check your Splide code (it looks like autosizing or something like that). ~These dots are navigation. If you will not be able to figure it out let me know and I may have time later today to check it out.

I’d be happy if you could check it out. :)

I can not find the problem…

hi @Camille_Di_Vincenzo1 I was able to find out what is cause the issue but I can’t fix it as is related to Splide. On video you can see that dots are shown when aria-busy is changing fro false to true`

This has something to do with accessibility aria-live more info on MDN

There were some issues with aria-busy for speech but it is fixed now.

Sorry I can’t help further but you have at least some starting point. There should be possibility to force aria-busy to have false statement but not sure if it is a correct way to fix it. You may ask developer on GitHub to register an issue. :man_shrugging:

Good luck

Ok Stan, thank you :)

Someone from the french community told me to change the code in my head because it was pointing to something inexistant.
I gave me a new one : <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css ">

If it can help someone :)

oh ok , so it was falsy (wrong version) link to library. :exploding_head: