Skip to content

Center slide items when they are less than the container width #614

Discussion options

You must be logged in to vote

@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__slidec…

Replies: 2 comments

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Answer selected by ronaldaug
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants