slick sliderでスワイプするごとに各画像にURLをつける方法を知りたいです

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

下記のサイトのように画像が切り替わるごとにURLが変わるように設定できますでしょうか。
https://www.tepping.jp/works/#ad-image-0

現在は画像をクリックすると下記のように番号（#26）を取得できるようになっています。
https://www.tepping.jp/test/works/#26

希望はスワイプするごとに番号つきのURLを取得できるようにしたいです。
なにかよい解決方法がありますでしょうか。　どうぞよろしくお願いいたします。

html
1<div id="wrap_gallery">
2  <ul id="slider">
3    <li class="slide-item"><a href="#31"><img data-lazy="../shared/images/works/main_image/book/akamama.jpg" ></a></li>
4     <li class="slide-item"><a href="#30"><img data-lazy="../shared/images/works/main_image/book/PTA.jpg"></a></li>
5    <li class="slide-item"><a href="#29"><img data-lazy="../shared/images/works/main_image/book/kyouikugeijyutusha.jpg" ></a></li>
6     </ul>
7</div>
8
9<div id="wrap_thumbnail">  
10 <ul id="thumbnail-list">
11	<li class="thumbnail-item"><a href="#"><img src="../shared/images/works/thumb/book/s_akamama.jpg" alt="ありのまま子育て"></a></li>
12    <li class="thumbnail-item"><a href="#"><img src="../shared/images/works/thumb/book/s_granpa.jpg" alt="PTAグランパ"></a></li>
13    <li class="thumbnail-item"><a href="#"><img src="../shared/images/works/thumb/book/s_kyougei.gif" alt="教育芸術社　『新学習指導要領ガイドブック』"></a></li>
14</ul>
15  </div>

javascript
1<!-- /slick sliderのjQuery　https://takblog.site/web/?p=144 -->
2<script type="text/javascript">
3
4
5$(function(){
6  var slider = "#slider"; // スライダー
7  var thumbnailItem = "#thumbnail-list .thumbnail-item"; // サムネイル画像アイテム
8  
9  // サムネイル画像アイテムに data-index でindex番号を付与
10  $(thumbnailItem).each(function(){
11   var index = $(thumbnailItem).index(this);
12   $(this).attr("data-index",index);
13  });
14  
15  // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
16  // 「slickスライダー作成」の前にこの記述は書いてください。
17  $(slider).on('init',function(slick){
18   var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
19   $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
20  });
21  
22 // URL からパラメータを取得
23const urlParam = location.search.substring(1);
24	let num = 0;
25
26if (urlParam) {
27  const params = urlParam.split('&');
28  const paramMap = new Map();
29
30  params.forEach(item => {
31    const paramItem = item.split('=');
32    paramMap.set(paramItem[0], paramItem[1]);
33  });
34
35  if (paramMap.has('slick')) {
36    num = Number(paramMap.get('slick')) - 1; // initialSlide の初期値が 0 なので -1
37  }
38}
39
40// slickスライダー初期化  
41$(slider).slick({
42  initialSlide: num, // ← これを追加
43  autoplay: false,
44  arrows: true,
45  swipe: true,
46  infinite: true
47});
48
49  //サムネイル画像アイテムをクリックしたときにスライダー切り替え
50  $(thumbnailItem).on('click',function(){
51    var index = $(this).attr("data-index");
52    $(slider).slick("slickGoTo",index,false);
53  });
54  
55  //サムネイル画像のカレントを切り替え
56  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
57    $(thumbnailItem).each(function(){
58      $(this).removeClass("thumbnail-current");
59    });
60    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
61  });
62});
63
64
65
66
67
68</script>
69