Splide issue - resolved

Add min-width to parent

by oilvier

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<div class="outer">
  <div class="inner">
    <div id="splide1" class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">Slide 01</li>
          <li class="splide__slide">Slide 02</li>
          <li class="splide__slide">Slide 03</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="outer">
  <div class="inner">
    <div id="splide2" class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">Slide 01</li>
          <li class="splide__slide">Slide 02</li>
          <li class="splide__slide">Slide 03</li>
          <li class="splide__slide">Slide 04</li>
          <li class="splide__slide">Slide 05</li>
          <li class="splide__slide">Slide 06</li>
          <li class="splide__slide">Slide 07</li>
          <li class="splide__slide">Slide 08</li>
          <li class="splide__slide">Slide 09</li>
          <li class="splide__slide">Slide 10</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

.outer {
  height: 150px;
  display: flex;
  background-color: red;
  padding: 1rem;
}

.inner {
  min-width: 0; /* this is needed */
  color: white;
  background-color: blue;
  flex: 1;
  text-align: center;
}

JavaScript

new Splide('#splide1', { pagination: false }).mount();
new Splide('#splide2', { pagination: false }).mount();