Splideによるスライダーのサンプル(autoplay)
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>
</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',
autoplay: true,
interval: 2000,
}).mount()
})
元記事を表示する