slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
-
レスポンシブ対応のスライダープラグイン slickの使い方
続きを見る
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
-
【slick】カスタマイズ用オプションまとめ一覧
続きを見る
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
スライドの総数と現在のスライドが何番目か表示させる方法
最初に完成形を見てみましょう。
See the Pen
by junpei (@junpei-sugiyama)
on CodePen.
極力余計なコードは書かないようにしましたが、多少CSSで整えています。
コード解説
それではコードを見てみましょう。
<div class="container">
<div class="slider">
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
</div>
</div> HTMLはシンプルな物ですね。
こちらについてはスライド全体を囲ったdivの.sliderというclass名がポイントとなります（class名は変更可能）
CSSについては特に変わった所はないので省略します。
もし矢印のデザインを変えたかったり、ドットインジケーターを表示＆デザインを変えたい場合は以下の記事を参照下さい。
-
【slick】前へ次への矢印をカスタマイズする方法（CSSと画像で変更）
続きを見る
-
【slick】ドットインジケーターをカスタマイズする方法
続きを見る
そして重要なのがjQueryとなります。
$(function () {
$(".slider")
.on("init", function (event, slick) {
$(this).append('<div class="slick-num"><span class="now-count"></span> / <span class="all-count"></span></div>');
$(".now-count").text(slick.currentSlide + 1); // 現在のスライド番号(+1が無いと0からスタートしてしまう)
$(".all-count").text(slick.slideCount); // スライドの総数
})
.slick({
// 通常のスライダー同様、オプションを記入
})
.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1); // 現在のスライド番号の次のスライドになったら番号を+1
});
}); HTML、CSSそしてこのjQueryをコピペすれば使えますが、jQueryは何点か補足します。
まずclass名については以下になります。
- slider → 画像を囲った要素のclass名
- now-count → 現在何番目のスライドか（数字可変）
- all-count → スライドの総数（数字固定）
- slick-num → 上記2つを囲む要素
上記class名は変更しても構いません。
次に4行目ですが.appendの意味はこちらになります。
append()
指定した子要素の最後にテキストやHTMLを追加できるメソッド
<span class="now-count"></span>は現在表示されているスライドの番号が表示されます（数字は可変）
<span class="all-count"></span>はスライドの総数が表示されます（数字は固定）
<div class="slick-num"></div>は上記2つを囲ったdivになります。
これは特に必須ではありませんが、あった方がスタイルの調整がしやすいかと思います。
またこの2つの間にある「/」は区切り線となります。形が違う場合は擬似要素で表示させても良いかも知れません。
そして実際に表示されるHTMLは以下になります。
<div class="container">
<div class="slider">
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
<div class="slick-img">
<img src="画像パス" alt=""/>
</div>
<div class="slick-num">
<span class="now-count">1</span> / <span class="all-count">3</span>
</div>
</div>
</div>HTMLに直接書く方法もありますが、今回はjQueryで書いています。
デモのスライダーはフェードで切り替えしていますが、もちろんスライドにも出来ますし矢印のデザインを変えたり、ドットインジケーターを表示させることも可能です。
まとめ
今回はslickでスライドの総数と現在のスライドが何番目か表示させる方法を解説しました。
ちなみにSwiperの方が簡単に実装することが可能です。
-
【Swiper】スライドの総数と現在のスライドが何番目か表示させる方法
続きを見る
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧
