当ブログで既に複数の記事で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>
ちなみに、筆者の別のサイトでこの技術を利用して実際のページを公開しています。
御興味がある方はぜひ【便利ジャパン】へご覧ください。
最新のコメント @zanmai.net
aaad @2016年03月31日
» 助かりました。ありがとう。
tinghai @2015年02月24日
» インストールしたJDKのbinディレクトリに移動してから、コマンドを実…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
iPhone6plus @2015年01月28日
» その同期するめーるの期間というところがでてきません。アカウント削除しか…
admin @2015年01月26日
» mysql起動失敗の場合、mysqld --standalone…
iphone6 plus @2014年11月03日
» 図で分かりやすい。助かりました。
ありがとう
iphone6 @2014年10月04日
» iphone6の設定も同じだね
asika @2014年09月25日
» 勉強になりました。ありがとう。
zanmai @2016年03月31日
» ①②③④の順で設定できるはず。…