Breakpoints doesn't work

Thank you.

pagination should be true, your Breakpoint says:
pagination: 'false'

drag looks correct:
drag: 'true'
Not sure, why it failed, but possible solutions/debugs:

• Verify the library version is correct, see project home.
• Disable Override Main Optionset option at your formatter or Views style
• Press CTRL/CMD + SHIFT + M to access mobile version if using laptop/desktop
• Ensure you have at least 5 slides, if perPage is 4, etc.
• Install Splide X, and verify the samples work, or not.

Let me know?

Thanks for your advices.

After more digging, I found the problem: on the same page, I render another splide, programmatically, with a different optionset (called fullscreen, with fade type and no breakpoint), to show a fullscreen slider of medias in background of page's heading. This splide shows only one item perPage, but has only one item. If I bypass splide for this case (and render directly the media entity), everything works fine.

Any idea how this behavior happens? Is it an issue with splide library or with this module overrides?

Is there a way, programmatically, to do something like: if items count is less or equal than perPage => destroy / "unslick"?

> programmatically

• You might mess up reserved selectors. See Splide UI for different types, reserved vs custom. Hence splide--default should not be used for custom works.
• Your JS is not using custom unique selector. Similar to point 1, only at JS.

To prove/ validate such a conflict, put each at separate pages.
To have custom works play nice with core/default, see/clone the provided sample JS initiator/loader.

By programmatically I mean with splide.manager service, not directly in JS.

What's strange is that on the same page, I try with one "complex" paragraph, resulting in programmatically computed splide (in preprocesses, with SplideManager) and one "simple" entity reference field with splide formatter, and both don't work (only in breakpoints' conditions, the initial desktop options work well) if I render my header splide with only 1 item. I try to render it with 2 items, and all splides work.

My header splide is rendered like this (simplified):

        $splideBuild = [
          '#settings' => [
            'optionset' => 'fullscreen',
          ],
          '#options' => [],
          'items' => [],
        ];

          foreach ($medias as $delta => $media) {
            $splideBuild['items'][] = [
              '#delta' => $delta,
              '#attributes' => [
                'class' => ['slide--delta--' . $delta],
              ],
              'slide' => $viewBuilderMedia->view($media, $style),
            ];
          }

          $variables['page_banner_medias'] = \Drupal::service('splide.manager')->build($splideBuild);

In my tests I have 2 optionsets:

• Multiple: slide, with 4 per page with breakpoints to have only 1 on mobile
• Fullscreen: fade, with 1 per page always (I try no breakpoint at all, or 1 breakpoint with the same values)

And my use cases:

• 1 splide with Multiple optionset, from entity reference formatter: OK
• 1 splide with Multiple optionset, with custom build with splide.manager: OK
• Both entity reference formatter and custom build on the same page: OK
• Both with more and less items than perPage value: OK
• Both and 1 splide with Fullscreen optionset and 2 items in it: OK
• With Fullscreen and only one item in it: Not OK

To fix this, instead of:

          $variables['page_banner_medias'] = \Drupal::service('splide.manager')->build($splideBuild);

I do:

          if (count($splideBuild['items']) > 1) {
            $variables['page_banner_medias'] = \Drupal::service('splide.manager')->build($splideBuild);
          } else {
            $variables['page_banner_medias'] = $splideBuild['items'][0]['slide'];
          }

But it needs more lines everywhere I build a splide, plus some specific css in frontend.

So, I really think that something is wrong somewhere, in my side or in module or library...

> With Fullscreen and only one item in it: Not OK

What is it "Not OK"?

We need to understand OK meaning here :)

To validate OK vs Not OK, try testing with with Splide field formatter/Views style.
If it is OK, then the problem is yours.
If not OK, then both are actually OK.

Why? Technically if 1 item, Splide is being destroyed, no more sliding behaviors.
Thus its "brokenness" or being destroyed or "Not OK" is actually OK :)

One obvious missing line is #settings property in the individual item loop like here:
https://git.drupalcode.org/project/splide/-/blob/2.0.x/splide.api.php?re...

There a sample of Fullscreen, IIRC. Try installing Splide X, and see if OK with your designated contents.

I already handle the behavior "if 1 item, Splide is being destroyed", I'm OK with that.

What I mean with "Not OK" is that if my Splide has only 1 item, I don't know why but on the same page are broken: they are not destroyed but widths, active slides... are not good, even if I refresh or interact with splide directly in JS in browser console.

After more digging, I figured out that:

• What I've called "Not OK" is not depending on standard field formatter or view or custom rendering with Splide manager (which I have tried with #settings property on each item)
• I try with 3 standard sliders, rendered by simple field formatters, and whenever I have one slider with only one item, the
• It's happening

So, it's probably on my side, but I can't point out which misconfiguration I do.

My recommendations:

• Remove conditions (IF ELSE) in #5 above. Use Splide rendering except that now knowing and understanding that 1 item is destroyed (no more drags, pagination, etc.) as OP described.
• Install Splide X, clone and limit the amount of contents to 1 to replicate your problematic situation, and others to unlimited, etc. And see if any difference. You can judge correctly given a comparison aka well-informed which one works and not.

Please share your findings and solutions to benefit others.