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

HTML

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
 
<div class="splide-outer">
  <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>
</div>

CSS

?
1
2
3
4
5
6
7
8
9
10
11
html, body {
  margin: 0;
  padding: 0;
}
.splide-outer {
  max-width: 960px;
  margin: auto;
}
.splide__slide img {
  width: 100%;
}

JavaScript

?
1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    type: 'loop',
    pagination: false
  }).mount()
})

元記事を表示する