【WordPressで使える】ずっと右から左へ流れ続ける画像スライダーアニメーションの作り方【追加CSSのみ】

今回はこちらのサンプルデモのような右から左へ流れ続ける画像スライダーのCSSアニメーションの作り方をご紹介させていただきます。

WordPressでホームページを作成していると便利なプラグインがたくさんあるので、ついプラグインに頼ってしまいますよね。

複数の画像が横にスライドしていく、いわゆるカルーセルスライダーと言われるものですが、ワードプレスのスライダープラグインで意外とサンプルデモのように単純にひたすら横にスライドし続けるものが、あまり良いものが見当たらなかったので、カスタムHTMLと追加CSSで作成いたしました。

Contents

スライダープラグイン「MetaSlider」は？

ちなみにワードプレスのスライダー系プラグインで有名な「MetaSlider」はカルーセル表示ができるのですが、この「MetaSlider」だと、右から左へ画像が流れるのですが、最後まで行くとスルスルっと左にスライドして最初に戻ってきます。今回は永遠にループで右から左へ流れ続けるようにしたかったので「MetaSlider」はやめました。

まずは画像をアップロード

今回は、スライダーで使いたい画像をすべて横300px×縦200pxにトリミングして、全部で7枚用意しました。

それをワードプレスのダッシュボード「メディア」＞「新規追加」からアップロードしていきます。

そして、アップロードした先の画像ファイルのURLを以下の方法で調べてどこかにメモしておいてください。

画像ファイルのURLの調べ方は、「メディア」＞「ライブラリ」から画像を選んで、添付ファイルの詳細、ファイルのURLに書かれています（「URLをクリップボードにコピー」でコピーできます）。

アップロードした7枚すべてメモしたら次に進みましょう。

カスタムHTMLの記述

今度は、スライダーを貼り付けたいページの編集画面で、ブロックの追加で「カスタム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>

”img01.jpg”～”img07.jpg”のところは、先ほどメモしたアップロードした画像ファイルURLを入れてください。

見ての通り、7枚の画像がリストになって、それが2セット同じものが書かれております。

追加CSSの記述

あとは、追加CSSの記述です。

ワードプレスのダッシュボード「外観」＞「カスタマイズ」から「追加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%);
  }
}

CSSのアニメーションを使って、2セットのスライド画像を途切れずに流しています。

サンプルデモ