別ページからの遷移時にslickの特定のスライドをアクティブにする方法

Question

前提・実現したいこと

aaa.html　にあるリンクをクリックした際、bbb.html内に複数あるslick（slick_1,slick_2,slick_3...）内の特定のスライド（例：slick_2の3枚目）をアクティブにした上でその位置まで遷移させたいと考えています。

js自体に不慣れなため、どのようにすればいいか皆目検討もつかない状況です。
・slick自体の設置はできております。
・slickGoToが使えそうだとは思うのですが、リンク押下時にcookieを取得し、ページ遷移時にどうやってデータを渡せばいいかがわかりません。

どのようにすればよいかお知恵を貸していただければと思います。

aaa.html

<div>
  <a href="./bbb.html#slick_2_03">bbb.htmlのslick_2の3枚めに遷移</a>
</div>

bbb.html

<ul class="slick slick_1">
  <li><img src="img01.jpg" alt=""></li>
  <li><img src="img02.jpg" alt=""></li>
  <li><img src="img03.jpg" alt=""></li>
</ul>
<ul class="slick slick_2">
  <li id="slick_2_01"><img src="img01.jpg" alt=""></li>
  <li id="slick_2_02"><img src="img02.jpg" alt=""></li>
  <li id="slick_2_03"><img src="img03.jpg" alt=""></li>
</ul>
<ul class="slick slick_2">
  <li><img src="img01.jpg" alt=""></li>
  <li><img src="img02.jpg" alt=""></li>
  <li><img src="img03.jpg" alt=""></li>
</ul>

bbb.js

(function($) {
  "use strict";
  $(".slick ").slick({
    autoplay: false,
    dots: false,
    slidesToShow: 1,
    slidesToScroll: 1
  });
})(jQuery);

Answer 1

自己解決しました。
パラメータに指定したスライド＆アンカーを乗せることで想定通りの動作ができました。

aaa.html

  <a href="./slick.html?slidenom=2#slick_2">bbb.htmlのslick_2の3枚めに遷移</a><br>
  <a href="./slick.html?slidenom=1#slick_3">bbb.htmlのslick_3の2枚めに遷移</a><br>
  <a href="./slick.html?slidenom=2#slick_1">bbb.htmlのslick_1の3枚めに遷移</a><br>
  <a href="./slick.html?slidenom=0#slick_2">bbb.htmlのslick_2の1枚めに遷移</a>

bbb.html

    <div id="slick_1" class="slick_box">
        <ul class="slick">
            <li>一枚目</li>
            <li>二枚目</li>
            <li>三枚目</li>
        </ul>
    </div>
    <div id="slick_2" class="slick_box">
        <ul class="slick">
            <li>一枚目</li>
            <li>二枚目</li>
            <li>三枚目</li>
        </ul>
    </div>
    <div id="slick_3" class="slick_box">
        <ul class="slick">
            <li>一枚目</li>
            <li>二枚目</li>
            <li>三枚目</li>
        </ul>
    </div>
    
    <p class="linkbtn"></p>

bbb.js

$(function(){
 //slider
    $(".slick ").slick({
        autoplay: false,
        dots: false,
        arrows:true,
        centerMode: true,
        centerPadding: '10%',
        slidesToShow: 1,
        slidesToScroll: 1
    });

    //パラメータ取得
    function getParam(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[[]]/g, "\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/+/g, " "));
    }  
    
    var slidenom = getParam('slidenom'); //スライドのn番目を取得
    var urlHashLink = location.hash + ' .slick'; //対象のslickを選択+slickGoToの動く先を指定

    $('.linkbtn').on('click', function() {
        $(urlHashLink).slick('slickGoTo', slidenom, true); //指定した変数を格納
    });
    
    //読み込み時にトリガーが発火
    $(document).ready(function(){
        $('.linkbtn').trigger('click');
        $('.slick').slick();
    });