カルーセルスライダーをCSSだけで実装
以前cssだけで作るクロスフェードのスライドショーは作ったもののカルーセルスライダーはまだだったので書き残しておきます。
切り替えタイミングさえわかってしまえばなんてことないように思えますが、ページを表示時に一枚目の画像を以下に表示するかがキモになってくると思います。
作りたい動きとデモ
まずはデモから
上記デモのように3枚の画像を切り替えるよう動かしていきます。要点をまとめると
- ページ表示時は一枚目の画像を表示しておく
- 一定時間経過後、左方向にスライドさせて非表示に
- 二枚目の画像をスライドの動きに合わせて表示
- 画像の枚数分繰り返す
- 最後の画像まで行ったら最初から繰り返し
これをcssで実現するために「@keyframes」を使ったアニメーションで実装していきます。
よくやりそうなダメな例
まずは失敗例から
3枚の画像を切り替えたいので素直に3枚の画像を切り替えようとすると陥るミスで、ページ表示時に最初の画像が表示されておらず、少し遅れてスライドしてくる形になります。
ページ表示時の動きを再現するためにスタートボタンを用意しました。
クリックで動き始めますので、動きはじめを確認してください
|
1 2 3 4 5 |
<div class="slide"> <img src="img/img1.jpg" alt=""> <img src="img/img2.jpg" alt=""> <img src="img/img3.jpg" alt=""> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.slide { position: relative; width: 80%; height: 400px; overflow: hidden; margin: 0 auto; } @keyframes slideshow { 0% { left: 100%; } 5% { left: 0%; } 33.33333% { left: 0%; } 38.33333% { left: -100%; } 100% { left: -100%; } } .slide img { position: absolute; top: 0%; left: 100%; width: 100%; height: 100%; object-fit: cover; vertical-align:bottom; animation: slideshow 24s linear infinite forwards; } .slide img:nth-child(2) { animation-delay: 8s; } .slide img:nth-child(3) { animation-delay: 16s; } |
ダメな例と紹介していますがこれが狙っていた動きであれば問題ないと思います。
デモと同じコード
デモの部分で挙げた要点をクリアするにはHTML・CSSともに工夫が必要になってきます。
今回のスライドショーを実装するポイントは3枚の画像のカルーセルスライダーだけど4枚画像を使うことになります。
4枚目の画像を使ってページ読み込み時の不具合を修正していきます。
|
1 2 3 4 5 6 |
<div class="slide"> <img src="img/img1.jpg" alt=""> <img src="img/img2.jpg" alt=""> <img src="img/img3.jpg" alt=""> <img src="img/img1.jpg" alt=""><!--不具合を修正用--> </div> |
CSSは1~3枚目の画像はカルーセルスライダーのアニメーション
4枚目はページ読み込み時の不具合に対応する形でアニメーションをそれぞれ指定していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/*カルーセルスライダーの大きさ設定*/ .slide { position: relative; width: 80%; height: 400px; overflow: hidden; margin: 0 auto; } /*3枚の画像を切り替えるアニメーションの設定*/ @keyframes slideshow { 0% { left: 100%; } 5% { left: 0%; } 33.33333% { left: 0%; } 38.33333% { left: -100%; } 100% { left: -100%; } } /*画像全体の設定*/ /*大きさによって変な部分が切れてしまうので画像の中心を表示できるよう指定*/ .slide img { position: absolute; top: 0%; left: 100%; width: 100%; height: 100%; object-fit: cover; vertical-align:bottom; animation: slideshow 24s linear infinite forwards; } .slide img:nth-child(2) { animation-delay: 8s; } .slide img:nth-child(3) { animation-delay: 16s; } /*4枚目の画像を使って読み込み時の不具合を修正するアニメーション*/ @keyframes noslide { 0% { opacity: 1; left: 0%; } 30% { opacity: 1; left: 0%; } 51% { opacity: 0; } 100% { opacity: 0; z-index: -1; } } /*読み込み時だけでいいので一回だけ動くようにする*/ .slide img:last-child { left: 0%; opacity: 0; z-index: 10; animation: noslide 10s forwards; position:relative; } |
二つのアニメーションを用意する
ページ読み込み時の不具合はアニメーションを二つ用意して
- カルーセルスライダーのアニメ（繰り返す）
- ページ読み込み時のみのアニメ（単発）
を、実行していきます。
タイミングや遅らせる目安は以前の記事を参考にしてください。
画像を中心に寄せるための工夫
スライドショーで使いたい画像の高さはすべて同じであれば問題ありませんが、バラバラの場合もあるでしょう。 そんな時は「object-fitプロパティ」を使ってアレコレすることもできます。
|
1 2 3 4 5 6 7 8 9 10 |
/*大きさによって変な部分が切れてしまうので画像の中心を表示できるよう指定*/ .slide img { position: absolute; top: 0%; left: 100%; width: 100%; height: 100%; object-fit: cover; vertical-align:bottom; } |
内容によってはこの部分のコードは必要ないので削っても大丈夫ですし、4枚目の画像の大きさを基準にすることもできますので工夫してみてください。
以上おしまい。
