Breakpoints do not properly override defaults.

Thank you.

Is it still an issue with the latest DEV?
Be sure to clear caches.

The issue still exists in the 2.0.x-dev branch.

> The issue still exists in the 2.0.x-dev branch.
Which one:
Defaults not added, or breakpoint will still have 4 images, or both?
You should focus on the second problem.
See why defaults is no problems below.

> if a breakpoint has a setting that is equivalent to the default setting, it does not get added to the data-splide attribute.
You are correct, and this module is too. It is exactly by design. The only reason is to save bytes when having many sliders on a page. All sliders should access the exact same defaults from a single source drupalSettings.splide, not from each data-splide. Slick has done this since 10 years ago, and no problems.

If any problems, it might be JavaScript.

This should help you debug.

PHP definitions:
This is where the default values are injected:
https://git.drupalcode.org/project/splide/-/blob/2.0.9/src/SplideSkinMan...

validBreakpointOptions:
https://git.drupalcode.org/project/splide/-/blob/2.0.9/src/SplideDefault...

JavaScript implementations:
defaults is for main display:
https://git.drupalcode.org/project/splide/-/tree/2.0.x/js/src?ref_type=h...

extras is for breakpoints:
https://git.drupalcode.org/project/splide/-/tree/2.0.x/js/src?ref_type=h...

resets is for a soft destroy:
https://git.drupalcode.org/project/splide/-/tree/2.0.x/js/src?ref_type=h...

Let me know?

The Splide X has samples with almost similar breakpoint settings. Please install and verify it.

Do the samples also fail?

Which one:
Defaults not added, or breakpoint will still have 4 images, or both?
You should focus on the second problem.

I suppose that the breakpoint still having 4 images is what is actually happening, but it seems to be that the breakpoint simply isn't working when a default value is set (e. g. perPage being set to 1). For example, I can set the perPage to 2 and the breakpoint will work, but it doesn't work when set to 1.

You are correct, and this module is too. It is exactly by design. The only reason is to save bytes when having many sliders on a page. All sliders should access the exact same defaults from a single source drupalSettings.splide, not from each data-splide. Slick has done this since 10 years ago, and no problems.

If this is true, then it's possible that the problem is occurring when the value from the drupalSettings.splide object is being applied to the breakpoints in the JavaScript code (I'm not familiar enough with the module code to see where that's happening). I can try focusing on that part of the process.

The Splide X has samples with almost similar breakpoint settings. Please install and verify it.

Do the samples also fail?

Splide X: Carousel fails. It goes from a perPage of 5 to 3 and stops at 3 when it should go to a perPage of 1.

Thank you.

That should narrow down the issue.

IIRC, when I converted Slick into Splide, I had a belief that Splide had fixed a few basic Slick issues, thus I left out a few workarounds. Some of them are arrows. There might be other things, including this issue.

This is the Slick version:
https://git.drupalcode.org/project/slick/-/blob/3.0.2/js/src/slick.load....

This is Splide:
https://git.drupalcode.org/project/splide/-/blob/2.0.9/js/src/splide.loa...

What if you change:
r[b] = $.extend({}, x, breakpoint);

into:

r[b] = $.extend({}, CONFIG.defaults, x, breakpoint);

If that works, patches are welcome.
If not, we'll figure it out later.

If that causes another chaos, perhaps we should investigate and correct this PHP line instead:
https://git.drupalcode.org/project/splide/-/blob/2.0.9/src/SplideSkinMan...

I am away from laptop for almost a month. I would leave it to contributions till I am back. I use my cell to answer replies this far.

I have just been able to see to it.

I did notice OP issue on a production mode. But only once. Soon after clearing caches things are in place correctly.

I tried to reproduce it, but no lucks.

The sample X Carousel also works perfectly.

Here are a few things to consider with this type of glitches:

• Use development mode, see: https://www.drupal.org/node/3340861 →
• Disable BigPipe, else you'll get headaches during devs.
• Also clear browsers' caches: CTRL/CMD + Shift + R or press F5.
• Always disable CSS and JS aggregation, see /admin/config/development/performance
• Always disable Views cache, if using Views UI, see Views UI > RHS > Advanced
• Always clear caches if any display issues: drush cr or /admin/config/development/performance, see TROUBLESHOOTING

In short, you'll have headaches with caches being enabled, or if working in Production mode, not DEV mode.

Having said that, your issue might be valid due to cache problems. However since caches should be disabled during devs, it is not an actual valid issue, hence normally called glitches.

The sample X Carousel also works perfectly.

I've found that Splide X: Carousel fails in 2.0.9 but works in 2.0.10 (and 2.0.x-dev). I can consistently switch between those respective versions and see the breakpoint issue appear and disappear between 2.0.9 and 2.0.10.

I just noticed that when I was testing Splide X: Carousel, I had been testing it in 2.0.9. It seems to work fine in 2.0.x-dev and 2.0.10.

This issue seems to have been fixed. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.