ホーム » ブログ » Swiper.jsでページング付きのスライドサンプル
このエントリーをはてなブックマークに追加
@2018/08/24

スポンサーリンク
当ブログで既に複数の記事でswiperライブラリ利用方法を掲載しましたと思います。
本日はページング付きのスライドサンプルを公開します。
もちろん、コピペーで簡単に再利用できますので、ぜひお試してください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>技術三昧</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<base href="https://www.benri.jp">
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="/css/plugin/swiper/swiper.min.css">
<link rel="stylesheet" href="/css/common.css">
<!--<link rel="stylesheet" href="/css/calendar/calendar.css">-->
<style>
/*---------------------------------------個別CSS定義*/

/*---------------------------------------swiper定義*/
.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 1rem;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-pagination-bullet {
	width: 1.2rem;
	height: 1.2rem;
	text-align: center;
	line-height: 1.2rem;
	font-size: 0.8rem;
	color:#000;
	opacity: 1;
	background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
	  color:#fff;
	  background: #007aff;
}

.SwiperIndex__item {
	width: calc(100% / 12);
	float: left;
}
li.SwiperIndex__item:hover {
	cursor: pointer;
	font-weight: bolder;
	background: lightblue;
	color: blue;
}

.SwiperIndex__current {
	font-size:125%;
	font-weight: bolder;
	color: blue;
}
</style>
  
</head>
<body style="margin:auto 2%;">
<script>
$(function(){
/*-----------------------------------------------------------------------------
 * 概要:一覧押したら、スライドを切り替わって表示
 * (スライドナビのページングアイコンと連動)
 *----------------------------------------------------------------------------*/
	$('.SwiperIndex__item').click(function(){
		var labelFor = $(this).data('labelfor');
		//連動先のスライドナビーアイコンをクリックさせるイベント
		$('#'+labelFor).click();
	});
	
/*-----------------------------------------------------------------------------
 * スライドナビーアイコンの状態を監視し、属性classが変わったら、
 * その連動先の一覧へ反映する
 *----------------------------------------------------------------------------*/
	// 監視対象要素(ノード群)
	let targetNodes = document.getElementsByClassName('PaginationNav');

	// オブザーバーインスタンス準備
	const obs = new MutationObserver((mutations) => {
		//連動先一覧対象要素からremoveClass
		$('.SwiperIndex__item').removeClass('SwiperIndex__current');
		//監視対象要素がactive状態になったら、連動先一覧の対象もactive状態にする(class=SwiperIndex__current)
		mutations.forEach((mutation) => {
			if(mutation.target.className.indexOf('swiper-pagination-bullet-active') >=0){
				var paginationId = mutation.target.id; //ページングのカレンダーID
				var obsId = $('#'+paginationId).data('observe');//連動対象のID
				$('#' + obsId).addClass('SwiperIndex__current');
			}
		}); 
	});

	// オブザーバーの監視対象(イベント)の設定
	const config = {attributes: true };

	//監視イベントを対象要素に設定
	for(i=0; i<targetNodes.length; i++) {
		obs.observe(targetNodes[i] , config);
	}

});
</script>

<div style="height:80%;">
	<h2>月一覧:<span style="font-size:70%;font-weight:normal;">月を押したら、その月のカレンダーをスライドインで表示</span></h2>
	<!-- swiperページング(上部) -->
	<ul class="SwiperIndex" style="list-style:none;">
		<li class="SwiperIndex__item" id="item1" data-labelfor="pNav1">1月</li>
		<li class="SwiperIndex__item" id="item2" data-labelfor="pNav2">2月</li>
		<li class="SwiperIndex__item SwiperIndex__current" id="item3" data-labelfor="pNav3">3月</li>
		<li class="SwiperIndex__item" id="item4" data-labelfor="pNav4">4月</li>
		<li class="SwiperIndex__item" id="item5" data-labelfor="pNav5">5月</li>
		<li class="SwiperIndex__item" id="item6" data-labelfor="pNav6">6月</li>
		<li class="SwiperIndex__item" id="item7" data-labelfor="pNav7">7月</li>
		<li class="SwiperIndex__item" id="item8" data-labelfor="pNav8">8月</li>
		<li class="SwiperIndex__item" id="item9" data-labelfor="pNav9">9月</li>
		<li class="SwiperIndex__item" id="item10" data-labelfor="pNav10">10月</li>
		<li class="SwiperIndex__item" id="item11" data-labelfor="pNav11">11月</li>
		<li class="SwiperIndex__item" id="item12" data-labelfor="pNav12">12月</li>
	</ul>

	<!-- .swiper-container(本体) Start-->
	<div class="swiper-container">
		<div class="swiper-wrapper"><!-- スライダーリストStart -->
			<div class="swiper-slide">
				<p">1月のカレンダー<br></p>
				<p>
					<h3>デモサイト:<span style="font-size:70%;font-weight:normal;"><a href="https://www.benri.jp/calendar/syukujitsu" target="_blank">便利ジャパン</a></span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 2月のカレンダー<br></p>
				<p>
					<h3>お知らせ:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 3月のカレンダー<br></p>
				<p>
					<h3>お知らせ:<span style="font-size:70%;font-weight:normal;">
						<a href="https://www.benri.jp" target="_blank">便利ジャパン</a>はこの方法でサイト開発しました。
						</span>
					</h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 4月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 5月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 6月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 7月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 8月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 9月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 10月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 11月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			<div class="swiper-slide">
				<p">Slide 12月のカレンダー<br></p>
				<p>
					<h3>カレンダー表示:<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</span></h3>
				</p>
			</div>
			
		</div><!-- //スライダーリストEND -->

		<div class="swiper-pagination"></div><!-- ページング要素 -->
		<div class="swiper-button-prev"></div><!-- 矢印:前へ -->
		<div class="swiper-button-next"></div><!-- 矢印:次へ -->

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

</div>

<script src="/js/plugin/swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + ' PaginationNav" id="pNav' + (index+1) + '" data-observe="item' + (index+1) + '">' + (index + 1) + '</span>';
      },
    },
    //spaceBetween: 30,//スライド要素の間隔
    mousewheel: true,
    initialSlide: 2,
    keyboard: {
    	enabled: true,
    },
  });
</script>  

</body>
</html>

ちなみに、筆者の別のサイトでこの技術を利用して実際のページを公開しています。
御興味がある方はぜひ【便利ジャパン】へご覧ください。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

check