CSSでスライドショーを作成するには?簡単にカスタマイズできるサンプルコードを紹介

2021.10.25

Webサイトにスライドショーを実装する方法で悩んではいませんか?

他サイトで見かけることはあっても、自分で作るとなると難しそうで手が出しにくいですよね。

実はJavaScriptなどのプログラムを使わずに、HTMLとCSSのみで実装することができます。

今回は、スライドショーを実装したいと考えている方のために、CSSで作成できるスライドショーのサンプルコードを紹介します

ぜひ最後まで読んでくださいね!

CSSを使ったスライドショー

Webサイトでスライドショーといえば、画像が切り替わるものがよくありますよね。

今回は画像を5つ用意して、1枚ずつ右から左にスライドしていく動きを作成します。

<div class="slide">
  <img src="img/sample1.png">
  <img src="img/sample2.png">
  <img src="img/sample3.png">
  <img src="img/sample4.png">
  <img src="img/sample5.png">
</div>

CSSでは以下のように記述します。

.slide {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  background: #fff;
}
.slide img {
  display: block;
  position: absolute;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 15s ease infinite;
}
.slide img:nth-of-type(1) {animation-delay: 0s;}
.slide img:nth-of-type(2) {animation-delay: 3s;}
.slide img:nth-of-type(3) {animation-delay: 6s;}
.slide img:nth-of-type(4) {animation-delay: 9s;}
.slide img:nth-of-type(5) {animation-delay: 12s;}
 
@keyframes slide-anime{
  0% {left: 100%;}
  2% {left: 0;}
  18% {left: 0;}
  20% {left: -100%;}
  100% {left: -100%;}
}

animationプロパティの機能を利用して、1枚ずつスライドさせています。

「animation: slide-anime 15s ease infinite」の値はそれぞれ、アニメーションの名前、再生時間、再生速度の変化、ループ回数を指定しています。

名前はその後の「@keyframes」の部分で使用します。

「ease」は、アニメーションの開始と終了を滑らかにする指定です。

「infinite」を指定することで、アニメーションは無限に繰り返されます。

また、animation-delayは、アニメーションの開始時間を示します。

5枚の画像を時間をずらして動かすことで、1枚ずつスライドしているように表示されます。

再生時間やそれぞれのアニメーション開始時間を変えたりして、動きを試してみてください。

応用して、透明度を変化させるアニメーションを、開始時間をずらして指定することで、1枚ずつ順番に表示されるスライドショーの作成もできますよ。

まとめ:スライドショーはCSSアニメーションで実装できる

今回は、CSSを使ってスライドショーを作成する方法を紹介しました。

5枚の画像のアニメーションの開始時間をずらして指定するのが重要でしたね。

@keyframesの部分を書き換えれば、様々な動きのスライドショーを作成できます。

オリジナルのスライドショーにも挑戦してみてください。

スライドショーを実装する上で、今回の記事が参考になれば幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5