CSSだけでスライドショー

CSS2019.02.14

HTMLとCSSだけでスライドショーを作ってみました。
もちろんJS不要なので苦手意識がある人にもおすすめ

動画化してみましたがレスポンシブ対応済みのものなのでレスポンシブ対応番の記事も御覧ください

レスポンシブ対応版！cssのみのスライドショー

当サイトで以前紹介したcssのみのスライドショーをサイトの調整のときに見てみたら少し改善できそうだったので改善したコードを書き残しておきます・・・。

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『sl・・・。

この記事の目次

CSSで作るスライドショー
- メリット
- デメリット
下準備
@keyframesのキモ
- スライドが3点の場合
アニメーション時間の設定

CSSで作るスライドショー

@keyframesとanimationを組み合わせるとcssだけでもスライドショーを作ることができます。

一応実装サンプルになります

デモページ

cssだけで作ったスライドショーのデモ

メリット

すごく動作が軽くなるのでモバイルにやさしい作りになります。

デメリット

とことん古いブラウザは対応していません。
記述がややこしい上に記述量が多い
とにかく作ってみます
流れはjQueryを使うときと似ていますのでそちらがわかっていれば下準備は楽かもしれません

下準備

まずはHTMLと基本的なCSSの準備から
今回の例ではdiv要素の中にimg要素を入れる形でマークアップをしていきます。
div要素はいろいろなところで登場するのでclass属性をつけておくと後々作業しやすいかもしれません。
ここではclass属性に「slide」を付けてみました

<div class="slide">
  <img src="img/img4.jpg" alt="">
  <img src="img/img5.jpg" alt="">
  <img src="img/img6.jpg" alt="">
</div>

</div>

このまま表示するとただただ画像が3枚表示されるだけなので、CSSでさらなる準備をしておきましょう

簡単に表現するならば「全ての画像を真ん中に表示できるようにしつつ重ね合わせる」作業をしていきます。
重ね合わせるにはimgの親要素である、「.slide」に対して「position:relative」をimgに対して「position:absolute」を指定します

これだけで重なりますがレスポンシブ対応を考えるともう一工夫してあげたいです
「.slide」に対して幅と高さを設定します。今回は適当にしました

さらにimg要素には画像の真ん中を表示できるように位置の設定もしてあげましょう
この時便利なものがtop・leftともに50%を指定しつつ、translateで-50%づつずらす方法で、
こうすることによりimgの中心点が「.slide」の中心に来るようになります。

「overflow:hidden」を使ってはみ出た部分は隠す設定もすると良いでしょう
細かいところも含めたCSSのコードはこちらになります

.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.slide {

position: relative;

width: 100%;

height: 400px;

overflow: hidden;

}

.slide img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

height: auto;

}

ここまでで下準備はおしまいあとは@keyframesとanimationの設定になります

@keyframesのキモ

@keyframesを設定するときに難しい部分として%の設定をどう切り分けたらいいのか、これに尽きると思います

今回はクロスフェード式で作っていきますスライドの点数に応じて変えていきましょう

クロスフェードとは？

フェードアウトとフェードインを同時に行って、画像が重なりながら切り替わる効果を
「クロスフェード」
と表現します

スライドが3点の場合

今回の例のようにスライドさせる画像が3点であれば33%を境に画像が切り替わるようにしていきます。
ただし、33%ぴったりで切り替えようとすると動きがぎこちなくなりますので
33%よりも前から消し始めて
33%よりも後に完全に消えるようにします。
更に0%から表示させているとやっぱりぎこちない動きになってしますので表示タイミングも少しずらしておきましょう

@keyframes slideshow {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

@keyframes slideshow {

0%{

opacity: 0;

}

10%{

opacity: 1;

}

28%{

opacity: 1

}

38%{

opacity: 0;

}

100%{

opacity: 0;

}

アニメーションの三分の一を使って表示・非表示を切り替えて、あとは非表示のままに指定します。
違和感がすごいですがこのままでいきます。
5%～28%までは確実に表示状態
そこから38%になるまでに非表示になります

これはあくまでもスライドの点数が3点の時の指定方法になりますので画像が増えた場合は不具合が起きるので注意が必要です。
設定の際の目安

スライド点数	切り替えタイミング	切り替えの範囲
2枚	50%	45%～55%
3枚	33%	28%～38%
4枚	25%	20%～30%
5枚	20%	15%～25%

あくまでも目安

アニメーション時間の設定

基本的に計算して当てはめてあげると良いでしょう
計算式は
スライドの点数×表示しておきたい時間＝アニメーションの時間
になります
今回上で紹介した3点のスライドショーを表示時間8秒で設定する場合
８秒×３枚＝２４
アニメーション全体の時間は24秒になります
後は、animationプロパティの設定をするだけです

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}

.slide img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

height: auto;

opacity: 0;

animation :slideshow 24s linear infinite;

}

opacity: 0の設定も追加してあげています。
あとは個別にanimation-delayプロパティでタイミングをずらしてあげればok
最終的なコードは↓

.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}

.slide img:nth-child(2){
  animation-delay: 8s;
}

.slide img:last-child{
  animation-delay: 16s;
}