マンガでわかるホームページ作成

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だけで自動再生スライドショーを作る方法でした。

関連記事