スライダーライブラリーSlickを使って、URLパラメータを操作する

はじめに

Slickでスライダーを作成した際に、URLパラメータの操作を行いました。スライダー以外のURLパラメータに配慮しながら作成したため、多少ハマりました。Slickの使用方法についてはこちらをご参考に。

サンプルコード

sample.html

<div class="slider-container">
  <div class="slider">
    <div class="slick-slide">
       <img class="slide-img" src="https://hogehoge.jp/images/20190101/xxxxxx.jpg" alt="hogehoge">
    </div>
    <div class="slick-slide">
       <img class="slide-img" src="https://hogehoge.jp/images/20190102/xxxxxx.jpg" alt="hogehoge">
    </div> 
    <div class="slick-slide">
       <img class="slide-img" src="https://hogehoge.jp/images/20190103/xxxxxx.jpg" alt="hogehoge">
    </div>
    ︙
  </div>
</div>

sample.js

var $slider_container = $('.slider-container'),
$slider = $('.slider');

$(function() {
  $slider.on('init', function(event, slick) {
    // slider-counterクラスの中にカウンターを用意
    $('img.slide-img').append('<div class="slider-counter">【<span class="current"></span> / <span class="total"></span>】</div>');
    $('.current').text(slick.currentSlide + 1);
    $('.total').text(slick.slideCount);
  })
  .slick({
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    dots: true,
    ︙
    // その他オプションはお好みで設定
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.current').text(nextSlide + 1);
  })
  // スライド変更後に以下のメソッドが発火
  .on('afterChange', function(event, slick, currentSlide, nextSlide) {
    var slideNum = currentSlide + 1;
    var url = location.href;
    var params = location.search;

    if (params) {
        // パラメータがある場合
        if (params.match(/(\?|&)image=/)) {
            // 既にimage=パラメータがある場合、「image=数字」の箇所を現在のスライド番号に文字列置換
            url = url.replace(/(\?|&)image=\d+/, '$1image=' + slideNum);
        } else {
            // image=パラメータを含まない場合、URLの末尾にパラメータ「image=数字」を追記
            url += '&image=' + slideNum;
        }
    } else {
        // パラメータがない場合、単にパラメータ「?image=数字」を追記
        url += '?image=' + slideNum;
    }
    $('.current').text(currentSlide + 1);
  });
});

サンプルコードの解説

1. slider-counterクラスの中にカウンターを用意し、【1/5】のように画像下でスライドを数えれるようにしています。slide-imgクラスがついたimgタグの直後にカウンターが表示されます。currentクラスが現在のスライド枚数で、totalクラスが合計のスライド枚数です。
2. ここではオプションで、dots: trueを指定していますが、代わりに arrows: true として「<>」矢印を設定しても良さそうですね。
3. 既存のJSメソッドlocation.hrefとlocation.searchで、それぞれURL全体とパラメータを取得し変数に代入します。
4. 最初のif文は、URLパラメータの有無で分岐します。無ければ単に、スライドのパラメータ?image=数字を追加します。
5. 入れ子になっている次のif文は、スライドのパラメータの有無で分岐します。ここで正規表現を利用し、?image=数字または&image=数字にマッチした場合、現在のスライド番号に文字列置換します。$1は正規表現の後方参照で、ここではマッチした?または&が代入されます。

参考

1. Slick
2. 【jQuery】スライダー系プラグイン slickの使用方法
3. Javascript で現在のページのURLを取得する方法。
4. JavaScriptで正規表現（文字列置換え編）
5. 正規表現あれこれ