画像をCSSアニメーションを使って自動でスライドさせる方法

画像をCSSアニメーションを使って自動でスライドさせることが出来たので、備忘録として残すことにします。

画像をCSSアニメーションを使って自動でスライドさせる方法

HTML

<h2>無限スクロール</h2>
<div class="slider">
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
</div>

<h2>無限スクロール（ホバーしたらストップする）</h2>
<div class="slider slide-paused" ontouchstart="">
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
    <ul class="slide-show">
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
        <li class="content">
            <img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
        </li>
    </ul>
</div>

ulタグを３つ用意する理由は、横に自動スライドした際にulタグが１つだど自動スライドが途中で切れてしまうからです。

CSS

body {
  padding: 50px 20px;
}
h2 {
  margin-bottom: 30px;
}
.content {
  width: 33.333vw;
  margin: 0 2.604vw;
}
.slider {
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}
.slide-show {
  display: flex;
  justify-content: left;
  -webkit-animation: loop 20s infinite linear 1s both;
  animation: loop 20s infinite linear 1s both;
}

/* loopのアニメーション */
@-webkit-keyframes loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* 画像をhoverした時にストップさせる */
.slide-paused:hover .slide-show {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}ぽ

ポイントはCSSアニメーションの指定と、画像をhoverした際にストップさせる実装です。

まとめ

以上が、画像をCSSアニメーションを使って自動でスライドさせる方法です。

関連記事:

【Swiper】サムネイル付き画像スライダーの作り方 【CSS/jQuery】左からハンバーガーメニューをアニメーションで表示させる方法 【Swiper】縦横比を保ったまま画像スライダーする方法 【Swiper】背景画像を自動スライダーさせる方法