Loop Slider : Preventing Over-Scrolling

How To
1

Hi everyone,

I’m currently working on implementing a slider using Splide.js. I’ve encountered an issue that I can’t seem to resolve, and I’m hoping someone can help me out.

What I’m Trying to Achieve:

  1. A responsive slider that displays a varying number of slides depending on the screen size. (Therefore I do not want to use the perPage parameter)
  2. Ensure that the slider does not allow over-scrolling into empty space, effectively stopping when the last slide is fully visible.

Current Configuration:

JSON Configuration:

{
  "type": "slider",
  "gap": "30px",
  "fixedWidth": "300px",
  "focus" : 0,
  "omitEnd" : true
}

Issues I’m Facing:

  1. Over-Scrolling: The slider allows me to click the next arrow multiple times even after the last slide is fully visible, resulting in empty white space. (the omitEnd parameter should prevent that as demonstrated in the Desired experience section below)

Screenshots:

Current experience:

Desired experience:

Has anyone faced a similar issue or can suggest a better approach to achieve the desired functionality? Any help would be greatly appreciated!

Thank you in advance for your assistance.

2

The trimSpace option will help you get rid of extra space on the right and left.

3

Thank you for your help!
I have tested that but unfortunately I still run into the same issue…