webリニューアルについて３　スライドショー

by nanaduki · 公開済み 2025年3月19日 · 更新済み 2025年3月20日

ヘッダーがひと段落ついたので次はスライドショー。

完成形が上の感じになったが
これはこれで結構てこずった。

画像のスライドショーで検索すればいくつもヒットするので
それらを参考にやってみたが、どうにもうまくいかない。

画像が表示されなかったり、うまく切り替わらなかったりと症状は様々だが
なかなかうまくいかず最終的にようやく今の形に落ち着いた。

結論としては以下のようなhtml+CSSになった。

html

<div class=”slide”>
<img src=”イメージファイル”>1枚目
<img src=”イメージファイル”>2枚目
・
・
必要な分だけ追加
今回は16枚使用している。
</div>

CSS

.slide {
–img-size: min(100%, 90vw); /* 画像幅要素 /
–aspect-ratio: 3; / 比率 */
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
inline-size: var(–img-size);
aspect-ratio: var(–aspect-ratio);
border: 0px solid #ffffff;
box-sizing: content-box;
margin: auto;
padding: 0;
background-color: #864242;
text-align: center;
overflow: hidden;
margin-top: 40px;
}

.slide img {
position: absolute;
top: 0;
left: 0;
inline-size: var(–img-size);
aspect-ratio: var(–aspect-ratio);
opacity: 0;
animation: fade 110s infinite; /* 全体の秒数若干多めに設定 */
}

/* 16枚の画像を順番に表示する */
.slide img:nth-child(1) { animation-delay: 0s; }
.slide img:nth-child(2) { animation-delay: 5s; }
.slide img:nth-child(3) { animation-delay: 10s; }
.slide img:nth-child(4) { animation-delay: 15s; }
.slide img:nth-child(5) { animation-delay: 20s; }
.slide img:nth-child(6) { animation-delay: 25s; }
.slide img:nth-child(7) { animation-delay: 30s; }
.slide img:nth-child(8) { animation-delay: 35s; }
.slide img:nth-child(9) { animation-delay: 40s; }
.slide img:nth-child(10) { animation-delay: 45s; }
.slide img:nth-child(11) { animation-delay: 50s; }
.slide img:nth-child(12) { animation-delay: 55s; }
.slide img:nth-child(13) { animation-delay: 60s; }
.slide img:nth-child(14) { animation-delay: 65s; }
.slide img:nth-child(15) { animation-delay: 75s; }
.slide img:nth-child(16) { animation-delay: 80s; }

/* フェードイン・フェードアウトのアニメーション /
@keyframes fade {
0% { opacity: 0; }
3% { opacity: 1; } / 画像が表示され始める /
25% { opacity: 1; } / 画像が表示され続ける /
40% { opacity: 0; } / フェードアウト */
100% { opacity: 0; }
}

この形にたどり着くのも苦労はしたが
（chatGPTにかなり頼った）
ここで問題になったのがリピート時の問題だ。

5秒ずつ計80秒で最初に戻るはずなのだが
どういうわけか最後の画像がしばらく残り続け
繰り返す頃にはすでに５～６枚目までいっているという謎の現象が起こった。

原因がよくわからないので全体の秒数を長めに設定し
画像が残り続ける謎の時間分を追加する事で対応している。

画像の枚数が少ないときにはこの問題が起こりにくい。
枚数が増えれば増える程、この謎の時間が生まれていくので
あまり増やしすぎないのが賢明かもしれない。