Splideによるスライダーのサンプル(perPage)
HTML
<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>
<li class="splide__slide">
<img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide4">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide5">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide6">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide7">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide8">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide9">
</li>
</ul>
</div>
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
}
.splide-outer {
max-width: 960px;
margin: auto;
}
.splide__slide img {
width: 100%;
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
new Splide('.splide', {
type: 'loop',
perPage: 3,
}).mount()
})
元記事を表示する