Splideによるスライダーのサンプル(start custom)

Click slides!

HTML

<ul class="list">
  <li data-index="0">
    <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1">
  </li>
  <li data-index="1">
    <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2">
  </li>
  <li data-index="2">
    <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3">
  </li>
</ul>
<div class="splide-outer"></div>

CSS

html, body {
  margin: 0;
  padding: 0;
}
.splide-outer {
  max-width: 960px;
  margin: auto;
}
.splide__slide img {
  width: 100%;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const html = `
    <div class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
            <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1">
          </li>
          <li class="splide__slide">
            <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2">
          </li>
          <li class="splide__slide">
            <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3">
          </li>
        </ul>
      </div>
    </div>
  `
  const listLi = document.querySelectorAll('.list > li')
  Array.from(listLi).forEach(el => {
    el.addEventListener('click', () => {
      document.querySelector('.splide-outer').innerHTML = html
      new Splide('.splide', {
        type: 'loop',
        start: el.dataset.index,
      }).mount()
    })
  })
})

元記事を表示する