Swiper.js

Javascript

カルーセルライブラリ比較

・SlickはJQUERYなので、ピュアなJSを使うSwiperのほうがよい

・Slickよりもファイルサイズが大きいが、多機能でカスタマイズ性に優れている

CDNの読み込み

【https://swiperjs.com/get-started#use-swiper-from-cdn】を参照

Reactの場合などのImportにも対応していることがわかる

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

HTML

<div class='swiper'>
    <div class=''swiper-wrapper'>
        <div class='swiper-slide'>
            <a><img /></a>
        </div>
        <div class='swiper-slide'>
            <a><img /></a>
        </div>
        <div class='swiper-slide'>
            <a><img /></a>
        </div>
    </div>
</div>

class名は変更しないこと

ページネーションを画像にしたい場合

<div class='thumbnails'>
		<img src='https://go-ga-ku.com/wp-content/uploads/2025/08/samplepic.jpg' data-index='0' />
		<img src='https://go-ga-ku.com/wp-content/uploads/2025/08/samplepic.jpg' data-index='1' />
		<img src='https://go-ga-ku.com/wp-content/uploads/2025/08/samplepic.jpg' data-index='2' />
</div>

を追加してJS

Javascript

CDNを読み込んだあとにスクリプトを書かないと反映されない

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	  <script>
	  const mainSwiper = new Swiper(".main-swiper", {
	  	spaceBetween: 20,
		centeredSlides: true, // 中央寄せ
		slidesPerView: 1.4, // 両端が少し見えるように
	  });
	  // サムネイルクリックでスライド
	  const thumbs = document.querySelectorAll(".thumbnails img");
	  thumbs.forEach((thumb, index) => {
	  	thumb.addEventListener("click", () => {
			mainSwiper.slideTo(index);
			thumbs.forEach(t => t.classList.remove("active"));
			thumb.classList.add("active");
		});
	  });
	  // 初期状態で最初のサムネをアクティブにする
	  thumbs[0].classList.add("active");
	  // スライドが変わるとサムネのアクティブも変更
	  mainSwiper.on("slideChange", () => {
	  	thumbs.forEach(t => t.classList.remove("active"));
		thumbs[mainSwiper.activeIndex].classList.add("active");
	  });
	  
	  // サムネイル画像3枚の合計幅がスライド画像1枚の画像幅にピッタリ合うようにする
	  function adjustThumbnailWidth() {
	  	const activeImg = document.querySelector(".main-swiper .swiper-slide-active img");
		const thumbs = document.querySelectorAll(".thumbnails img");
		const gap = 10;
		if (thumbs.length === 0) reutrn;
		
		// メインスライダー画像１枚の幅を取得
		const activeImgWidth = activeImg.offsetWidth;
		// gapの合計値
		const totalGap = (thumbs.length - 1) * gap;
		// サムネイル画像１枚あたりの幅を計算
		const thumbWidth = (activeImgWidth - totalGap) / thumbs.length;
		// CSSに反映させる
		thumbs.forEach(thumb => {
			thumb.style.width = thumbWidth + 'px';
		});
	  }
	  // ページロード時とリサイズ時に調整
	  window.addEventListener("load", adjustThumbnailWidth);
	  window.addEventListener("resize", adjustThumbnailWidth);
	  </script>

BACK