Center slide items when they are less than the container width

[ronaldaug]

I have 6 slide items in a single row and splide options are as below.

 {
    "arrows": false,
    "autoplay":true,
    "height":"100px",
    "type":"slide",
    "pagination":false,
    "perPage": 6,
    "gap":20,
    "breakpoints":{"768":{"perPage": 4},"576":{"perPage": 2}}
}

According to my breakpoints, when it's 768 it will became 4 slide items
however as I fetch the data from an API and I can't predict it will always be 4 items, if user add only 3 items via API, I want them to be centered. And it should cover for all screen/responsive sizes.
How can I achieve it?
Thanks in advance.

[ronaldaug]

I can add justify-content:center to .splide__list to make all slide items centered. It's working as expect in Desktop screen size.
But in mobile size, the slider looks weird. The very first slide is only showing a half.
Could someone help me to center the slide items without having issue in mobile as below demo? Thanks.

The demo link

[christian-reichart]

Edit:
Meanwhile they updated the package, so see new answer in the comment below. 👍

@ronaldaug I've found a solution. For this to work you need to know/calculate the total number of items you have at runtime. I'm guessing since you get your data from an API, you can work with something like items.length . I did this with react-splide but will try to tell the concept with the regular HTML.

HTML:

<div class="wrapper">
  <section class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide"> -- Some loop renders multiple slides here. -- </li>
      </ul>
    </div>
  </section>
</div>

CSS:

.wrapper {
  display: flex;
  justify-content: center;
}

.splide {
  display: inline-block;
  max-width: 100vw;
}

Now for splide__slidecomes the tricky part, where you need to dynamically set the styling based on your total items.
Let's say your total items are a variable called totalItems, set your style for each splide__slideto:

const slideStyle = `min-width: ${100/totalItems}%;`

If you use a gap (const gap = '1.25rem') between your Slides, use:

const slideStyle = `min-width: calc(${100/totalItems}% - ${gap} + ${gap} / ${totalItems});`

So what's happening here:

By giving the .splidethe display: inline-block; it is only as big as the items that are inside. Because we have the flexwrapper it is now centered.
The width of each item inside is calculated by SplideJS by percentage, that means if you shrink your .splide, which we just did, all items are also shrinked down. To prevent this we set the min-widthof each slide. Now only when there are less items total than items per page, the min-widthwill actually be bigger than the calculated width of SplideJS. And with this we can prevent the shrinking.
When using a gap the min-width calculation has to account for the margin-right, that all items get from SplideJS, so we calculate the width minus the gap first and than add a fraction of the gap again depending on the number of items, so all is "pushed" to the right.

Hope this helps.

[FabianVeritree]

You can use the overflow status checker:

.splide:not(.is-overflow) .splide__list {
    justify-content: center;
  }

Check: https://splidejs.com/guides/overflow/

[lindsayweb]

That solved it for me. Thanks!