CSSだけで自動再生スライドショー

スライドショーは通常javascriptを使って作成します。
しかしjavascriptの場合、スライドショーの生成に時間がかかり、一瞬崩れて表示される場合があります。

今回紹介するCSSだけで自動再生スライドショーなら崩れずに最初から表示できます。

CSSだけであるため複雑な動きは難しいですが、簡単な動きであればCSSだけでスライドショーを作成することができます。

完成イメージ

• 
• 
• 
• 

特徴

• 自動でスライド
• aタグ（画像リンク）あり・なし、どっちでも可
• マウスオーバーでスライドストップ
• 画像を増減するとき再計算し、CSS調整が必要

計算

計算が必要なので以下の定義をもとに数式を当てはめてください。

• 1枚表示させたい時間=a秒
• 切り替え時間=b秒
• 画像の数=c枚
• 画像の順＝n番目

なお下記例では以下の数値となっています。

• 1枚表示させたい時間=3秒
• 切り替え時間=0.5秒
• 画像の数=4枚

html

<ul>
        <li><a href="#1"><img src="1.jpg"></a></li>
        <li style="animation-delay: 3.5s"><a href="#2"><img src="2.jpg"></a></li><!--(a+b)×(n-1)-->
        <li style="animation-delay: 7s"><a href="#3"><img src="3.jpg"></a></li>
        <li style="animation-delay: 10.5s"><a href="#4"><img src="4.jpg"></a></li>
</ul>

animation-delay: ○s（前のスライドが終わるまで待つ）

○＝（ 1枚表示させたい時間 + 切り替え時間 ）×（ 画像の順 - 1）

CSS

ul{
    list-style: none;
    position: relative;
}
li{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
li{
    animation: slide 14s infinite;/* (a+b)×c=x */
    opacity: 0;
}
@keyframes slide{
    0%{opacity: 0;}
    3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    25%{opacity: 1;}/* 100÷c=z */
    28.5%{opacity: 0;z-index: 0;}/* y+z */
}
ul:hover li{
    animation-play-state:paused;/* マウスを載せると一時停止 */
}
li:first-child{
    position:relative;
}

animation:△s（スライド1周の時間）

△ ＝（ 1枚表示させたい時間 + 切り替え時間 ）× 画像の数

@keyframes　2個目の%は切り替え時間の割合

切り替え時間 秒 ÷ △秒 × 100%

@keyframes　3個目の%は1つ目のスライド終了の割合

100％ ÷ 画像の数

@keyframes　4個目の%は上記2つの合計

（ 切り替え時間 秒 ÷ △秒 × 100% ）+（ 100％ ÷ 画像の数 ）

まとめ

自動スライドはCSSだけでできます。
GIF動画代わりにも使えそうです。

ただし、数値が変わると再計算が大変なので、数や時間を固定させて運用するほうが楽だと思います。

↓別バージョンのスライドショーも紹介しています。

CSSだけで選択ボタン付きスライドショー

CSSだけで選択ボタン付き自動再生スライドショー

以上、CSSだけで自動再生スライドショーを作る方法でした。