問題
「slick」で、現在のスライドが何番目かを表示させたい。
解決策
「slick」の実行時、再実行時、スライド切り替わり直後に「currentSlide」で現在のスライドが何番目かを取得して表示させる。
現在のスライドが何番目か
スライドショーでも、種類によっては現在のスライドの番号を表示する必要が出てきます。
今回はjQueryスライダープラグイン「slick」で、現在のスライドの番号を表示する方法をご紹介します。
DEMOはこちら
／
HTML
<div class="slick-box slidecnt">
<div class="slide">
<p class="titles">スライド01</p>
<p class="text">スライド01です。</p>
</div>
<div class="slide">
<p class="titles">スライド02</p>
<p class="text">スライド02です。</p>
</div>
<div class="slide">
<p class="titles">スライド03</p>
<p class="text">スライド03です。</p>
</div>
<div class="slide">
<p class="titles">スライド04</p>
<p class="text">スライド04です。</p>
</div>
<div class="slide">
<p class="titles">スライド05</p>
<p class="text">スライド05です。</p>
</div>
<div class="slide">
<p class="titles">スライド06</p>
<p class="text">スライド06です。</p>
</div>
<div class="slide">
<p class="titles">スライド07</p>
<p class="text">スライド07です。</p>
</div>
<div class="slide">
<p class="titles">スライド08</p>
<p class="text">スライド08です。</p>
</div>
<div class="slide">
<p class="titles">スライド09</p>
<p class="text">スライド09です。</p>
</div>
<div class="slide">
<p class="titles">スライド10</p>
<p class="text">スライド10です。</p>
</div>
</div>
<p class="slick-num">
<span class="inner">
<span class="nowcnt"></span> ／ <span class="allcnt"></span>
</span>
</p>CSS
.slick-box .slide{
padding: 20px;
background-color: #EAE6E5;
border: 1px solid #ffffff;
border-right: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.slick-box .titles{
margin-bottom: 10px;
font-size: 125%;
font-weight: bold;
letter-spacing: 1pt;
text-align: center;
}
.slick-num{
text-align: center;
}
.slick-num .inner{
display: inline-block;
padding: 10px 15px;
color: #F15A24;
font-weight: bold;
background-color: #fef5f2;
}現在のスライドが何番目かを取得できる「currentSlide」
「currentSlide」を使用することで、現在のスライドの番号を取得することができます。
「currentSlide」の数値は「0、1、2…」という形で0からのカウントとなるため、「+1」することで「何番目か」を明示することができるようになります。
| currentSlide | 現在のスライドの番号を返します。 「0、1、2…」という形で0からのカウントで表示されます。 |
|---|
スライドの番号を更新するタイミング
スライドの番号を更新するタイミングとして、「実行時」、「再実行時」、「スライドの切り替わった直後」の3点を対象にします。
「実行時」は「init」、「再実行時」は「reInit」、「スライドの切り替わった直後」は「afterChange」となります。
| init | スライドが初期化された時のイベント |
|---|---|
| reInit | スライドが再初期化された時のイベント |
| afterChange | スライドの切り替わった後のイベント |
記述例
$('.slick-box').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
...
});スライドの総数を取得できる「slideCount」
「slideCount」を使用することで、スライドの総数を取得することができます。
| slideCount | スライドの総数を返します。 |
|---|
スライド番号を表示する記述例
上記を元に、現在のスライドの番号を表示する記述例は以下になります。
$('.slick-box.slidecnt').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
var i = (currentSlide ? currentSlide : 0) + 1;
$('.slick-num .nowcnt').text(i);
$('.slick-num .allcnt').text(slick.slideCount);
});
$('.slick-box.slidecnt').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 5000,
focusOnSelect: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
swipeToSlide: true,
arrows: false
});参照
【slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 | NxWorld】
https://www.nxworld.net/tips/jquery-plugin-slick-slide-counter.html
コメント