slick sliderで表示させる画像を指定する方法を知りたいです

Question

slick sliderでサムネイル付きのスライダーを作成しました。下記のサイトです。
https://www.tepping.jp/test/works/

各画像に<a href="#10">で囲ってそれぞれ番号を割り振っています。
他のページから２番目以降に流れる画像が表示されるようにリンクをはりたいと思っているのですが、
下記のようにリンクをつけても、１番目の画像が表示されてしまいます。
https://www.tepping.jp/test/works/index.html#30 (←これば２番目の画像です)

何か方法はありますでしょうか？
どうぞよろしくお願いいたいます。

【html】

<ul id="slider"> <li class="slide-item"><a href="#31"><img data-lazy="../shared/images/works/main_image/book/akamama.jpg" ></a></li> <li class="slide-item"><a href="#30"><img data-lazy="../shared/images/works/main_image/book/PTA.jpg"></a></li> <li class="slide-item"><a href="#29"><img data-lazy="../shared/images/works/main_image/book/kyouikugeijyutusha.jpg" ></a></li> <li class="slide-item"><a href="#28"><img data-lazy="../shared/images/works/main_image/book/kodomo.jpg" ></a></li> ....

【js】

<!-- /slick sliderのjQuery　https://takblog.site/web/?p=144 --> <script type="text/javascript"> $(function(){ var slider = "#slider"; // スライダー var thumbnailItem = "#thumbnail-list .thumbnail-item"; // サムネイル画像アイテム // サムネイル画像アイテムに data-index でindex番号を付与 $(thumbnailItem).each(function(){ var index = $(thumbnailItem).index(this); $(this).attr("data-index",index); }); // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける // 「slickスライダー作成」の前にこの記述は書いてください。 $(slider).on('init',function(slick){ var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); }); //slickスライダー初期化 $(slider).slick({ autoplay: false, arrows: true, swipe: true, infinite: true //これはつけましょう。 }); //サムネイル画像アイテムをクリックしたときにスライダー切り替え $(thumbnailItem).on('click',function(){ var index = $(this).attr("data-index"); $(slider).slick("slickGoTo",index,false); }); //サムネイル画像のカレントを切り替え $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ $(thumbnailItem).each(function(){ $(this).removeClass("thumbnail-current"); }); $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); }); });

Answer 1

slick には最初に表示する画像を設定するinitialSlideというオプションがあります。それをURLパラメータから取得した値にすることで、他のページから指定の画像を表示できるようになるのではないでしょうか。
下のコードは、slick=3というパラメータを付けることでhttps://www.tepping.jp/test/works/index.html?slick=3のURLにすると3番目の画像が表示されるようにしています。（サンプルなので動作の保証はできません・・・）

// URL からパラメータを取得
const urlParam = location.search.substring(1);
let num = 0;

if (urlParam) {
  const params = urlParam.split('&');
  const paramMap = new Map();

  params.forEach(item => {
    const paramItem = item.split('=');
    paramMap.set(paramItem[0], paramItem[1]);
  });

  if (paramMap.has('slick')) {
    num = Number(paramMap.get('slick')) - 1; // initialSlide の初期値が 0 なので -1
  }
}

// slickスライダー初期化  
$(slider).slick({
  initialSlide: num, // ← これを追加
  autoplay: false,
  arrows: true,
  swipe: true,
  infinite: true
});

Comments

[sabotenmil]

takopo様
早速お教えいただきましてありがとうございました！
無事に解決することができました。本当に助かりました。
３行目のlet num = 0;の部分にシンタックスエラーがでてしまっているのですが、
なにかお心あたりはありますでしょうか？（スライダーは問題なく動いているのですが...）
// URL からパラメータを取得
const urlParam = location.search.substring(1);
let num = 0;　←この部分です

再度の質問で申し訳ありません。

[takopo]

無事に解決できてよかったです。
エラーメッセージには何と書いてありますか？

[sabotenmil]

お返事おそくなりましてすみません。
３行目のlet num = 0;の部分にシンタックスエラーとでてしまっています。
シンタックスエラーとしか出ていないので詳しくは分からないのですが....
ご回答いただけましたら幸いです。

[takopo]

https://www.tepping.jp/test/works/index.html?slick=3
のサイトやこちらの環境で確認したところ（Chrome、Firefox）、シンタックスエラーは出ていないようなのですが、どういった環境で出ていますか？シンタックスエラーというのは、{ がなかったりだとか、スペルミスとか、文章が正しくないですよというエラーなので、うまくコピーできてない可能性があります。

[takopo]

こちらでエラーが出てないので原因はわからないのですが、 let num = 0; の部分にエラーが出ているということなので、ここを「var slickNum = 0;」にして、「num」の部分を「slickNum」に変えてみてください。

[sabotenmil]

早速ご回答いただきましてありがとうございます。
Dream weaver でシンタックスエラーが出ているのですがFirefoxで確認しましたら
エラーはでていないので大丈夫そうです。お手間かけてすみませんでした。
（ちなみにアドバイスのように変更しましたら動かなくなってしまいました。）
ちなみにもうひとつ質問なのですが、スワイプして画像がかわるごとにリンクの番号を取得する仕様にすることは可能なのでしょうか？
下記のサイトのように画像が変わるたびにURLが変わるようにできるのでしょうか。
https://www.tepping.jp/works/#ad-image-0
何度も質問すみません。お時間ありましたらご回答いただけましたら幸いです。

[takopo]

大丈夫そうでよかったです。
＞ちなみにもうひとつ質問なのですが、スワイプして画像がかわるごとにリンクの番号を取得する仕様にすることは可能なのでしょうか？
こちらの質問は表題の内容と異なりますので、新たに質問を立てていただいた方が有効な解決策を得られやすいと思います。

[sabotenmil]

そうですね、新たに質問を投稿いたします。
今回はご丁寧にいろいろ教えていただきまして本当にありがとうございました。