【WordPress】画像をスライドさせる。カルーセルの設定

画像カルーセルは何枚かの写真が右から左へスライドさせる機能で、最近使われているサイトも多い。

このような機能だ。

やり方はクラッシックエディタのコードかブロックエディタの「カスタムHTML」を使う。
まずは画像を挿入する。

<div class="slider1">
  <ul>
    <li><img src="img01.jpg"></li>
    <li><img src="img02.jpg"></li>
    <li><img src="img03.jpg"></li>
    <li><img src="img04.jpg"></li>
    <li><img src="img05.jpg"></li>
    <li><img src="img06.jpg"></li>
    <li><img src="img07.jpg"></li>
  </ul>
  <ul>
    <li><img src="img01.jpg"></li>
    <li><img src="img02.jpg"></li>
    <li><img src="img03.jpg"></li>
    <li><img src="img04.jpg"></li>
    <li><img src="img05.jpg"></li>
    <li><img src="img06.jpg"></li>
    <li><img src="img07.jpg"></li>
  </ul>
</div>

「src="img01.jpg"」の「img01.jpg」の部分を実際の画像URLに置き換える。
画像のURLはメディアライブラリの各画像の設定で確認できる。

画像の準備ができたら、追加CSSに以下のコードを記載する。

.slider1 {
  display: flex;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height:200px;
  overflow: hidden;
}
.slider1 ul{
  display:flex;
  padding: 0;
  margin:0;
}
.slider1 li{
  width:300px;
  list-style: none;
}
.slider1 ul:first-child {
  animation: slide1 150s -75s linear infinite;
}

.slider1 ul:last-child {
  animation: slide2 150s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

たったこれだけで画像カルーセルが完成する。

デモサイト

なお、今回のコードは
EM Web Create様の記事「【WordPressで使える】ずっと右から左へ流れ続ける画像スライダーアニメーションの作り方【追加CSSのみ】」から引用させていただきました。