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

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="splide-outer">
  <div class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
        </li>
        <li class="splide__slide">
        </li>
        <li class="splide__slide">
        </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()
})

元記事を表示する