Splideを使ってスライダーを実装しよう

document.addEventListener( 'DOMContentLoaded', function() {
	const options = {
		rewind: true,
		type: 'loop',
	};	  
	const splide = new Splide(".splide", options);
	  splide.mount();
  } );

<div class="splide" role="group" aria-label="Splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="/wp-content/uploads/2025/01/射的の屋台（日中）.jpg" alt="射的の屋台（日中）" width="1920" height="1080" class="aligncenter size-full wp-image-538" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/文化系の部室（日中）.jpg" alt="文化系の部室（日中）" width="1920" height="1080" class="aligncenter size-full wp-image-546" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/一人部屋２（日中）.jpg" alt="一人部屋２" width="1920" height="1080" class="aligncenter size-full wp-image-547" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/パソコン部屋２（日中）.jpg" alt="パソコン部屋２" width="1920" height="1080" class="aligncenter size-full wp-image-548" /></li>
</ul>
</div>
</div>

.splide__pagination__page.is-active {
    background: #ab2f2f;
}