Splideによるスライダーのサンプル(矢印変更)
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__arrows">
<button class="splide__arrow splide__arrow--prev"></button>
<button class="splide__arrow splide__arrow--next"></button>
</div>
<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%;
}
.splide__arrow {
width: 4em;
height: 4em;
border-radius: 0;
background: #c00;
}
.splide__arrow--prev {
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.splide__arrow--next {
clip-path: polygon(0 0, 0 100%, 100% 50%);
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
new Splide('.splide', {
type: 'loop',
}).mount()
})
元記事を表示する