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

HTML

<div class="splide-outer">
  <div class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide" data-splide-hash="slide01">
          <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1">
        </li>
        <li class="splide__slide" data-splide-hash="slide02">
          <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2">
        </li>
        <li class="splide__slide" data-splide-hash="slide03">
          <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3">
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

document.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    type: 'loop',
  }).mount(window.splide.Extensions)
})

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    type: 'loop',
  }).mount()
})

元記事を表示する