swiperのスライダー式のカレンダー(その２）
- 技術三昧@2018-04-20 19:11:47
スポンサーリンク
">4月</li>
<li class="Month" id="month5" data-labelfor="pNav5">5月</li>
<li class="Month" id="month6" data-labelfor="pNav6">6月</li>
<li class="Month" id="month7" data-labelfor="pNav7">7月</li>
<li class="Month" id="month8" data-labelfor="pNav8">8月</li>
<li class="Month" id="month9" data-labelfor="pNav9">9月</li>
<li class="Month" id="month10" data-labelfor="pNav10">10月</li>
<li class="Month" id="month11" data-labelfor="pNav11">11月</li>
<li class="Month" id="month12" data-labelfor="pNav12">12月</li>
</ul>
<div class="swiper-container">
<div class="swiper-wrapper"><!-- スライダーリストStart -->
<div class="swiper-slide">
<p">Slide 1月のカレンダー<br></p>
<p>
<h3>カレンダー表示：<span style="font-size:70%;font-weight:normal;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</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;">ドラッグまたはページングでカレンダーを変わったら、月一覧にも反映</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', {
autoHeight: false, //default: false;
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="month' + (index+1) + '">' + (index + 1) + '</span>';
},
},
//spaceBetwee
1人
◎技術三昧掲示板で掲載した情報（リンク・リンク先を含む）に関して、掲示板管理者が確認や保証を行うことは一切ありません。
すべて利用者のモラルに委ねられおり、掲示板から張られたリンクに関するトラブルが生じても管理者側は免責とさせていただきます。