slickで現在のページ数 / 総ページ数を表示させる

今回やりたいこと

よくスライダーで使用されるjQueryのライブラリー「slick.js」ですが、今回初めて総ページ数とページ数を表示させたいという要望があり、少々手こずったので記事に残します。

HTML

まずはHTMLです。今回の実装が画像+その下に文字を表示させるような構成になっていたのでこのようなHTMLになっていますが、ほとんどの場合は画像のみのスライダーの場合が多いと思うのでもちろん画像のみでOKです。


<div class="slider__area">
  <ul class="js-slider">
    <li><a href="#" target="_blank">
        <img src="bnr01.jpg" alt="">
        <div class="slider__txtbox">
          <p class="slider__txt">テキストテキスト</p>
          <p class="slider__txt slider__txt--small">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </a></li>
    <li><a href="#" target="_blank">
        <img src="bnr02.jpg" alt="">
        <div class="slider__txtbox">
          <p class="slider__txt">テキストテキスト</p>
          <p class="slider__txt slider__txt--small">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </a></li>
    <li><a href="#">
        <img src="bnr03.jpg" alt="">
        <div class="slider__txtbox">
          <p class="slider__txt">テキストテキスト</p>
          <p class="slider__txt slider__txt--small">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </a></li>
    <li><a href="#">
        <img src="bnr04.jpg" alt="">
        <div class="slider__txtbox">
          <p class="slider__txt">テキストテキスト</p>
          <p class="slider__txt slider__txt--small">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </a></li>
  </ul>
</div>

jQuery

今回の実装で使用したコードをそのままコピペしているので多少冗長になっていますが、「.slick({})」内は通常のslick.jsを実装するのに必要なオプションになります。ですので通常通りカスタマイズしてください。


$(function () {
	$(".js-slider")
		.on("init", function (event, slick) {
			$(this).parent().append(
				'<div class="slick-counter"><span class="count-current"></span> / <span class="count-total"></span></div>'
			);
			$(".count-current").text(slick.currentSlide + 1);
			$(".count-total").text(slick.slideCount);
		})
		.slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			autoplay: false,
			autoplaySpeed: 7000,
			arrows: true, prevArrow: '<div class="slide-arrow prev-arrow"></div>',
			nextArrow: '<div class="slide-arrow next-arrow"></div>',
			dots: true,
			dotsClass: 'slider-dots',
			swipe: true,
			draggable: false,
			responsive: true,
			minSlides: 1,
			maxSlides: 1,
			centerMode: true,
			centerPadding: '22%',
			responsive: [
				{
					breakpoint: 768,
					settings: {
						centerPadding: '8%',
					}
				}
			]
		})
		.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
			$(".count-current").text(nextSlide + 1);
		});
});

重要なのはその前後の「.on」の後に書かれている記述です。今回はこの「◎/△」という表示をposition: absolute;で好きな位置に表示させたかったので、スライダーの各コンテンツを囲む親要素の更に親要素に対して、この「◎/△」にあたる要素を追加しています。

付与するクラスは特に指定はありませんが、コードが紐づいている部分があるので、合わせて変更するようにしてください。

CSSは今回は省略します。

その他のカスタマイズ

左右のボタン

上記slickのオプション内にある「arrows」「prevArrow」「nextArrow」の部分は、スライダーコンテンツを左右に移動するボタンをカスタマイズしています。

デフォルトだと、かなり寂しい感じのボタンが表示されるので、左右のボタンもカスタマイズしてみましょう。「arrows」をtrueにすることで、この左右ボタンを表示させることができます。

「prevArrow」「nextArrow」には、そのボタンのHTMLを直接していすることができます。ボタンを画像にする場合はもちろんimg要素を指定すればよいですし、今回のようにCSSでボタンを作成する場合はdiv要素を指定し、付与したclassにCSSでスタイルを付けましょう。

スライダー下のドット

上記slickのオプション内にある「dots」「dotsClass」の部分でスライダー下に表示されるdotをカスタマイズしています。

「dots」をtrueにすることでスライダー下のドット機能が有効になります。
そして、「dotsClass」に指定した文字列がslick.jsによって生成されるドット部分のHTMLに付与されるクラスになります。

備忘録として今回実装したdotsのcss(scss)を残しておきます。


.slider-dots {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
  li {
    display: inline-block;
    margin: 0 10px;
    @include l-pc {
      margin: 0 20px;
    }
    button {
      position: relative;
      border: none !important;
      text-indent: -9999px;
      outline: none;
      @include l-pc {
        cursor: pointer;
      }
      &:before {
        content: "●";
        font-size: 20px;
        text-indent: 0px;
        position: absolute;
        border: none !important;
        top: 0;
        left: 0;
        color: #cccccc;
        @include l-pc {
          font-size: 24px;
        }
      }
    }
    &.slick-active {
      button:before {
        color: green;
      }
    }
  }
}

レスポンシブ対応

PCとスマホ共通のslickオプションを使用することは難しいことが多いです。

上記slickのオプション内にある「centerMode」「centerPadding」の部分で、スライダーの左右をチラ見せさせて、表示中のコンテンツを中央寄せにすることができます。

「centerPadding」は左右にとる余白を指定することができるのですが、ここをPCとスマホで共通にするのは厳しいですよね。

そこで使うオプションがその下にある「responsive」です。書き方が特殊なのでややこしいですが、やっていることはシンプルで、「breakpoint」768pxのとき、「settings」centerPaddingは◎◎、という指定をしているだけになります。

もちろんcenterPadding以外のオプションも適用させることができるので、PCとスマホで異なるオプション値を適用させたい場合は、この「responsive」オプションを使用しましょう。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらこちらです。ありがとうございました。

related article

2020/07/31 JavaScript

Youtubeをスマホでインライン自動再生させる

2021/02/19 JavaScript

ユーザーエージェントを判定してスマホ用サイトに飛ばす

2019/10/10 JavaScript

HTML内に書いたjQueryが動かない

2019/11/19 JavaScript

slideUpやslideDownを使ったときのレスポンシブ対応