CSSで背景画像をフェードインして切り替えるスライドショー

プラグイン「ml slider」のように完成されたスライドショーでは無くても、自作のスライドショーをサイトに載せたいと調べていたところ見つけたサンプル「CSSで背景画像をフェードインして切り替える」、生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来る。感謝！

早速、コピーしてstyle.CSSに貼り付け試したところ動かない。当然と言えば当然のことだけど、WordPressで使用するためには修正・訂正等を行うことが必要だという事に気が付いた。

1．全体のBOX定義は表示する画像の大きさのみ
2．背景の指定の「.box .bgImg」によって作動する。
3．段差で背景画像のアニメーションを実行の画像は一旦「ダッシュボード→メディア」から画像をダウンロードしてそのコピーを「bgImg src」に貼り付ける。
4．背景画像数は4画像 × 各5s = 20sがベース、なので4画像にはanimation-delay: を５秒づつ加える。画像数1枚ふやして５枚で確認、５画像ｘ各5s = 25sで問題なくスライドショーとして表示できた。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来る。尚、この10枚のスライドショーは、「keyframes」を修正して完成させた。

＜HTML＞
<div class="box　bgImg"> ←「bgImg」を加える
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
  <div class="bgImg src5"></div>
  <div class="boxString">フェード<br>切り替え</div>　←削除
</div>

＜CSS＞
/*---全体のBOX定義--- */
.box {
  position   : relative;
  max-width  : 400px;
  height     : 250px;
  margin     : auto;
  overflow   : hidden;
}
/*---背景の指定--- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;  /*--4画像x5s 20s--*/
}
/*---段差で背景画像のアニメーションを実行--- */
.box .src1 {
  background-image : url(./img1.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(./img2.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(./img3.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(./img4.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
}
@keyframes bgimgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
＃全面文字は削除することにした。
/*---前面の文字定義（サンプルのため変更してください）---*/
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 10px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}

枚数を増やすためには通常transform: scaleでサイズの変更をさせないと最後の1枚の動作が変則的になるようだ。6画像も可能だけど今後の課題とした。

早速、フロントページでスライドショーを試した。投稿ページ用の画像サイズで完成させたのでサイズは小さ目、プラグインを使用しないでこれだけの出来栄えなので満足してる。