スライドショーのリンク設定がうまくいかず悩んでいます

Question

サイトのスライドショーのリンク設定がうまくいかず悩んでいます。
スライドショーの画像は、ユーザーの見る画面によって高さが変わる仕様になっています。
一番先頭だけにリンクを設置したいのですが、aタグを付けてもリンクになりません。
原因がわかる方教えてください。

また、一番最初の画像だけスライドショーの表示時間を長くすることも可能でしたらそちらも教えていただけるとありがたいですm(_ _)m

<script>	
	$(window).on('load resize', function() {
  $('#slideshow').height($('#slideshow img').outerHeight(true));
});
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
jQuery(function($) {
  $('.link-box').css('cursor','pointer');
  $('.link-box').on('click',function () {
    window.location.href = $(this).find('a').attr('href');
  });
});
</script>

<script>
	$(function(){
  //#で始まるアンカーをクリックした場合に処理
  $('a[href^=#]').click(function() {
  // スクロールの速度
  var speed = 400; // ミリ秒
  // アンカーの値取得
  var href= $(this).attr("href");
  // 移動先を取得
  var target = $(href == "#" || href == "" ? 'html' : href);
  // 移動先を数値で取得
  //ヘッダーの高さ
  var hedderHeight = 87;
  var position = target.offset().top - hedderHeight;  
  // スムーススクロール
  $('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
  });
});
 
 
// 別ページからのリンク
$(window).on('load', function() {
  var headerHight = 87; //ヘッダの高さ
  if(document.URL.match("#")) {
  var str = location.href ;
  var cut_str = "#";
  var index = str.indexOf(cut_str);
  var href = str.slice(index);
  var target = href;
  var position = $(target).offset().top - headerHight;
  $("html, body").scrollTop(position);
  return false;
}
 
});
	</script>

<ul id="slideshow" class="slideshow">
 <li class="showSlide"><a href="#"><img src="images/0.jpg" alt=""></a></li>
<li><img src="images/1.jpg" alt=""></li>
 <li><img src="images/2.jpg" alt=""></li>
 <li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
 <li><img src="images/9.jpg" alt=""></li>
 <li><img src="images/10.jpg" alt=""></li>
</ul>

.slideshow {
  width: 100%;
  list-style-type: none;
  position: relative;
}

.slideshow > li {
  opacity: 0;
  position: absolute;
  transition: opacity 3s ease-in-out;
}

.slideshow > li.showSlide {
  opacity: 1;
}

.slideshow > li > a > img {
  display: block;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
}


.slideshow > li > img {
  display: block;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
}

Answer 1

一番先頭だけにリンクを設置したいのですが、aタグを付けてもリンクになりません。

単に opacity: 0 とだけ指定すると、「透明になってるので目には見えないけど、要素自体は存在する」状態になります。透明な li 要素が手前に存在するので、それより奥にある a 要素をクリックできません。
（透明なガラスの向こう側にあるボタンは押せない、というイメージです）

pointer-events を使えば、透明な要素をスルーして、その奥にあるリンクを押せるようになります。

  .slideshow > li {
    opacity: 0;
+   pointer-events: none; /* 目に見えないしクリックもできない */
    position: absolute;
    transition: opacity 3s ease-in-out;
  }

  .slideshow > li.showSlide {
    opacity: 1;
+   pointer-events: auto; /* 目に見えるしクリックもできる */
  }

--

一番最初の画像だけスライドショーの表示時間を長くする

質問文の javascript を見る限り、次のスライドに移るコードが見当たらないので、このままだと永遠に1枚目の画像が出続ける気がします。
どのようなスクリプトでスライドショーを行っているのか質問文に追加していただければ、何か答えられるかもしれません。

コメントありがとうございます。
現在は以下の処理でスライドショーを行っているのですね。

$(function(){
  var imgs = $("#slideshow > li");
  var imgLen = imgs.length;
  var count = 0;
  function changeImg(){
    count = (count + 1) % imgLen;
    imgs.removeClass("showSlide").eq(count).addClass("showSlide");
  }
  setInterval(changeImg, 5000);
})

setInterval だと、5秒置きにしか処理が実行できないので、特定のスライドだけ時間を延ばすことができません。
そのため、 await を使って、任意の時間だけ処理を停止させる sleep 関数を自作する必要があります。

  // 引数に指定した値（ミリ秒）だけ、処理を停止させる。
  function sleep(ms) {
    return new Promise(function(resolve){ setTimeout(resolve, ms) })
  }

上記の sleep を使えば、スライドごとに表示時間を変えることができます。

async function startSlideshow() {
  while(true) {
    if(count == 0) {
      await sleep(8000);  // 最初のスライドだけ8秒停止
    } else {
      await sleep(5000);  // 他のスライドは5秒停止
    }
    changeImg();  // スライドの切り替え
  }
}

最後に、 setInterval を startSlideshow に差し替えます。

  $(function(){
    var imgs = $("#slideshow > li");
    var imgLen = imgs.length;
    var count = 0;
    function changeImg(){
      count = (count + 1) % imgLen;
      imgs.removeClass("showSlide").eq(count).addClass("showSlide");
    }

+   // 引数に指定した値（ミリ秒）だけ、処理を停止させる関数。
+   function sleep(ms) {
+     ...
+   }

+   // スライドショーを開始する関数。
+   async function startSlideshow() {
+     ...
+   }

-   setInterval(changeImg, 5000);
+   startSlideshow();
  })

これで、最初のスライドだけ表示時間を延ばすことができると思います。
お試しください。

Comments

[tt_360]

すみません。 javascriptを追記しました。これでわかるでしょうか？

[tt_360]

リンクはできました！ありがとうございます(T_T)

[shinoharat]

追記ありがとうございます。
ただ、追記してもらったコードは、「スライドショー」ではなく「スムーススクロール」関連の処理に見えます。

各画像の表示/非表示は「showSlide」というクラスの有無で制御しているので、

　element.classList.add("showSlide");

とか

　$(...).addClass("showSlide");

みたいなコードをどこかに書いてるんじゃないかと思いますが、どうでしょうか？

[shinoharat]

あるいは、何かライブラリを使ってて、自分ではスライドショーのコードを書いてなかったりしますかね？
その場合はライブラリの名前を教えてもらえると助かります。

[tt_360]

お返事大変遅くなりすみません。

$(function(){
var imgs = $("#slideshow > li");
var imgLen = imgs.length;
var count = 0;
function changeImg(){
count = (count + 1) % imgLen;
imgs.removeClass("showSlide").eq(count).addClass("showSlide");
}
setInterval(changeImg, 5000);
})

これでしょうか？
無知で見当違いなことばかり言ってたら申し訳ございません(T_T)

[shinoharat]

コメントありがとうございます。
回答を編集し、一番最初の画像だけスライドショーの表示時間を長くする方法を追記しました。
ご確認ください。

[tt_360]

ご丁寧に最後まで教えていただきありがとうございました。とても助けられました(T_T)