Weblasts

カルーセルスライダーをCSSだけで実装

以前cssだけで作るクロスフェードのスライドショーは作ったもののカルーセルスライダーはまだだったので書き残しておきます。
切り替えタイミングさえわかってしまえばなんてことないように思えますが、ページを表示時に一枚目の画像を以下に表示するかがキモになってくると思います。

作りたい動きとデモ

まずはデモから

上記デモのように3枚の画像を切り替えるよう動かしていきます。要点をまとめると

  • ページ表示時は一枚目の画像を表示しておく
  • 一定時間経過後、左方向にスライドさせて非表示に
  • 二枚目の画像をスライドの動きに合わせて表示
  • 画像の枚数分繰り返す
  • 最後の画像まで行ったら最初から繰り返し

これをcssで実現するために「@keyframes」を使ったアニメーションで実装していきます。

よくやりそうなダメな例

まずは失敗例から
3枚の画像を切り替えたいので素直に3枚の画像を切り替えようとすると陥るミスで、ページ表示時に最初の画像が表示されておらず、少し遅れてスライドしてくる形になります。
ページ表示時の動きを再現するためにスタートボタンを用意しました。
クリックで動き始めますので、動きはじめを確認してください

ダメな例
サンプルコードも載せておきます

ダメな例と紹介していますがこれが狙っていた動きであれば問題ないと思います。

デモと同じコード

デモの部分で挙げた要点をクリアするにはHTML・CSSともに工夫が必要になってきます。
今回のスライドショーを実装するポイントは3枚の画像のカルーセルスライダーだけど4枚画像を使うことになります。 4枚目の画像を使ってページ読み込み時の不具合を修正していきます。

CSSは1~3枚目の画像はカルーセルスライダーのアニメーション
4枚目はページ読み込み時の不具合に対応する形でアニメーションをそれぞれ指定していきます。

二つのアニメーションを用意する

ページ読み込み時の不具合はアニメーションを二つ用意して

  • カルーセルスライダーのアニメ(繰り返す)
  • ページ読み込み時のみのアニメ(単発)

を、実行していきます。
タイミングや遅らせる目安は以前の記事を参考にしてください。

画像を中心に寄せるための工夫

スライドショーで使いたい画像の高さはすべて同じであれば問題ありませんが、バラバラの場合もあるでしょう。 そんな時は「object-fitプロパティ」を使ってアレコレすることもできます。

内容によってはこの部分のコードは必要ないので削っても大丈夫ですし、4枚目の画像の大きさを基準にすることもできますので工夫してみてください。

以上おしまい。

POPULAR