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()
})
元記事を表示する