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

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

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

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

diff

1 .slideshow > li { 2 opacity: 0; 3+ pointer-events: none; /* 目に見えないしクリックもできない */ 4 position: absolute; 5 transition: opacity 3s ease-in-out; 6 } 78 .slideshow > li.showSlide { 9 opacity: 1; 10+ pointer-events: auto; /* 目に見えるしクリックもできる */ 11 }

--

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

質問文の javascript を見る限り、次のスライドに移るコードが見当たらないので、このままだと永遠に1枚目の画像が出続ける気がします。

どのようなスクリプトでスライドショーを行っているのか質問文に追加していただければ、何か答えられるかもしれません。