【JavaScript】Swiperでスライダーのドット表示をカスタマイズしたときのメモ | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から2年以上経過しています。

Swiperで画像のようなドットを設定したときのメモ。 SlickとSwiperどちらも試して、結果Swiperで実装しました。
スライダーのドット設定はデザインによっては実装がかなり面倒だったりしますが、とりあえず意図した通り動いているので良しとします。

各種コード

HTML

スライダーの外側にドットと矢印を表示する（slide-pagination-wrapperの個所）。

<div class="swiper">
	<div class="swiper-wrapper">
	
		<div class="swiper-slide">
			<div class="inner">コンテンツ</div>
		</div><!--/.swiper-slide-->

		<div class="swiper-slide">
			<div class="inner">コンテンツ</div>
		</div><!--/.swiper-slide-->

		<div class="swiper-slide">
			<div class="inner">コンテンツ</div>
		</div><!--/.swiper-slide-->

	</div><!--.swiper-wrapper-->
	
	<div class="slide-pagination-wrapper">
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
  </div>

</div><!--/.swiper-->

JavaScript

画面サイズで一度に表示するスライド数を変える必要がありました。画面サイズが600px以上の場合は3枚表示（両サイドが切れて表示）、600px以下の場合は1枚表示（両サイドが切れて表示）に設定しています。

<script>

const mediaQueryList = window.matchMedia('(min-width: 600px)');

/**
 * イベントリスナー
 */
const listener = (event) => {
  // リサイズ時に行う処理
  if (event.matches) {
    // 600px以上
		const mySwiper = new Swiper(".swiper", {
			// Optional parameters
			loop: true,
			slidesPerView: 3.5,
			centeredSlides: true,
			spaceBetween: 30,
			autoplay: { // 自動再生
  			delay: 5000, // 1秒後に次のスライド
  			disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
			},
			// If we need pagination
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},

			// Navigation arrows
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

			// And if we need scrollbar
			scrollbar: {
				el: '.swiper-scrollbar',
			},

		});
    //console.log('PC用ブレークポイント用処理');
  } else {
    // 600px未満
		const mySwiper = new Swiper(".swiper", {
			// Optional parameters
			loop: true,
			slidesPerView: 1.5,
			spaceBetween: 20,
			centeredSlides: true,

			// If we need pagination
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},

			// Navigation arrows
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

			// And if we need scrollbar
			scrollbar: {
				el: '.swiper-scrollbar',
			},

		});
    //console.log('SP用ブレークポイント用処理');
  }
};

// リスナー登録
mediaQueryList.addEventListener("change", listener);

// 初期化処理
listener(mediaQueryList);

</script>

CSS

メディアクエリで画面サイズで表示を変えています。

<style>
.swiper {
  margin-top: 80px;  
}
.swiper-wrapper {
  margin-bottom: 80px;
}


.swiper-slide {
  background-color: #fff;
  opacity: 0.5;
  transform: scale(.90); 
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  height: auto !important;
  width: 100%;
}

.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-next {
  background-color: #fff;
  height: auto !important;
  width: 100%;
  opacity: initial;
  transform:none;
  transition: none;
}

.slider .slick-slide.slick-active {
  opacity: 1;
  transform: scale(1); 
}

/*dots and arrow custom*/
.slide-pagination-wrapper {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  height: 36px;
  max-width: 450px;
}


.swiper-pagination {
  position: static!important;
  z-index: initial!important;
}


.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  width: auto;
}


.swiper-pagination-bullets {
  display: flex;
  align-items: center;
}


.swiper-button-prev,
.swiper-button-next {
  position: static;
  margin-top: initial;
}


.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-next, .swiper-button-prev {
  font-size: 12px;
  line-height: 36px;
  text-align: center;
  font-size: 12px;
  line-height: 0;
  width: 36px!important;
  height: 36px!important;
  padding: 0;
  cursor: pointer;
  display: block;
  background: #fff;
  border-radius: 50%;
  color: #A82B43!important;
  position: relative;
  z-index: 11;
}

.swiper-button-prev:before {
  content: '<';
  display: block;
}

.swiper-button-next:before {
  content: '>';
  display: block;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  justify-content: center;
}

.swiper-pagination-bullet {
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: initial!important;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  line-height: 10px;
  opacity: initial !important;
  width: 10px!important;
  height: 10px!important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff!important;
  border: solid 1px #fff;
  border-radius: 50%;
  line-height: 10px;
  width: 10px!important;
  height: 10px!important;
}

@media screen and (max-width:600px) {
  
  .swiper-slide.swiper-slide-prev,
  .swiper-slide.swiper-slide-next {
    background-color: #fff;
    opacity: 0.5;
    transform: scale(.90)!important; 
    transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
    height: auto !important;
    width: 100%;
  }

  .slide-pagination-wrapper {
    max-width: 400px;
  }
}/*-600px*/

</style>