<div class="splide" aria-label="スライドの番号を表示させる">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-01.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-02.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-03.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-04.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-05.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-06.jpg" alt="">
</li>
<li class="splide__slide">
<img src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/splide-07.jpg" alt="">
</li>
</ul>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
.splide__slide img {
width: 100%;
height: auto;
object-fit: cover;
}
.pagination {
counter-reset: pagination-num;
}
.splide__pagination__page:before {
counter-increment: pagination-num;
content: counter( pagination-num );
}
.button-pagination {
width: 1.5rem;
height: 1.5rem;
margin: 0.4rem;
content: "";
background: #212121;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
position: relative;
}
.button-pagination.is-active {
background: #afeeee;
color: #212121;
}
.button-pagination:before {
font-size: 1rem;
}
@media screen and (min-width: 600px) {
.splide__track {
height:300px;
}
}
const options = {
cover: true,
heightRatio: 0.5,
classes: {
pagination: "splide__pagination pagination",
page: "splide__pagination__page button-pagination"
}
};
const splide = new Splide(".splide", options);
splide.mount();