はじめに

綺麗なサイトとかによくある画像をスライドにしているのを真似したくなったことはありませんか？今回はそういった人向けにCSSだけで簡単にできる画像スライドの実装を紹介します。
完成形は下のようなイメージです！我が家の愛犬のちろです！

HTML

slide.html

  <div class="slide">
    <img src="static/image/chiro1.jpeg">
    <img src="static/image/chiro2.jpeg">
    <img src="static/image/chiro3.jpeg">
    <img src="static/image/chiro4.jpeg">
    <img src="static/image/chiro5.jpeg">
  </div>

ちなみに写真の相対パスはご自身のに変更ください。
筆者はflaskでアプリを作成しているためこのような階層になっております。

CSS

slide.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%;}
}

※もしFlaskで書きたい人がいれば！

先ほどflaskの話も出てきたので、もしflaskでアプリを作っておりスライドにしたい方がいらっしゃればぜひこちらを参考ください

slide.html

{% extends 'base.html' %}

{% block header %}
  <link rel="stylesheet" href="static/css/slide.css">
{% endblock %}

{% block slide %}
  <div class="slide">
    <img src="static/image/chiro1.jpeg">
    <img src="static/image/chiro2.jpeg">
    <img src="static/image/chiro3.jpeg">
    <img src="static/image/chiro4.jpeg">
    <img src="static/image/chiro5.jpeg">
  </div>
{% endblock %}

これが大事です！↓

base.html

<!DOCTYPE html>
<html lang="ja">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        {% block header %}
        {% endblock %}
        <title>Slide Sample</title>
  </head>
  <body>
    <div class="container">
	    {% block slide %}
	    {% endblock %}
    </div>    
  </body>
</html>

最後に

いかがでしたでしょうか？
何か不明点や編集点などありましたらご連絡ください。

【超簡単】CSS 画像をスライドにする実装方法

はじめに

HTML

CSS

※もしFlaskで書きたい人がいれば！

最後に