【プラグイン不要】リンク付き画像の無限ループスライダーを作る【CSS・HTMLのみ】

2022-05-01

無限ループスライダーとは

「汎兮堂HOME」は僕のメインブログ（内容はほとんどラン記録ですが）であると同時に、汎兮堂関連サイトのポータルの役割を期待しているため、トップページに汎兮堂各関連サイトの紹介を掲載しています。一方で、この紹介部分を全ページに表示するとしつこいですし、邪魔にもなるので、トップページにだけ表示されるようにカスタマイズしてあります。このあたりのHOWTOは過去に記事にしてあります。

・Bloggerカスタマイズ　「トップページにだけ表示」実践編

以前から、この関連サイト紹介部分をもう少しスマートにしたいと思っていたのですが、今回、「無限ループスライダー」を利用して、この目的を一応は果たすことができた（と思っている）ので、備忘録として、この無限ループスライダーの作り方を書き留めておきます。

「無限ループスライダー」というのが正式名称なのかどうかわかりません。コンベア型スライドショーなどとも呼ばれるようです。言葉で説明すると、複数の画像がベルトコンベアに乗って流れるように右から左へ水平方向に移動し、それが無限ループとして続くもの、ということになりますが、伝わるでしょうか。動画で見てもらえば一発でわかると思うので、以下をご覧ください。

現時点（2022.05.01）での汎兮堂HOMEのトップページです。各関連サイトのバナーが右から左へ流れ続けているのをご覧いただけると思います。また、各画像にホバーする（マウスポインタを乗せる）と、動きが止まり、画像が少し拡大すると同時に透明度が増すことで注意を引き、さらにサイトの説明がツールチップとして表示されるようになっています（動画にはマウスとツールチップは録画されていません。ツールチップについては実際のサイトでお試しください）。

今回の記事は、このスライダーの作り方の備忘録です。

Wordpressであればプラグインひとつで簡単に作れてしまうのではないかと勝手に想像しているのですが（違っていたらごめんなさい）、Bloggerにはそういう便利なものはないので、HTMLとCSSで地道に作るしかありません。逆に言えば、HTMLとCSSだけで作れるので、Bloggerのサイトにかぎらず、どのサイトでも実装できるわけです。

大まかな構造を説明しますと、横長の背景画像（いわばコンベアのベルト）の上に複数の画像を乗せたものを2つ作り、この2つを横に並べて、右から左へ繰り返し動かし続ける、という仕組みです。

無限ループスライダーのHTML

では、早速ですが、コードをご覧ください。まずはHTMLです。

<div class="conveyer" ontouchstart="">

<div class="belt1">

<div><a href="リンク先URL01" target="_blank" rel="noopener noreferrer"><img src="画像ファイル01のソース" alt="代替テキスト01" title="説明文01"/></a></div>
<div><a href="リンク先URL02" target="_blank" rel="noopener noreferrer"><img src="画像ファイル02のソース" alt="代替テキスト02" title="説明文02"/></a></div>
<div><a href="リンク先URL03" target="_blank" rel="noopener noreferrer"><img src="画像ファイル03のソース" alt="代替テキスト03" title="説明文03"/></a></div>

</div><!-- belt1の終わり -->

<div class="belt2">

<div><a href="リンク先URL01" target="_blank" rel="noopener noreferrer"><img src="画像ファイル01のソース" alt="代替テキスト01" title="説明文01"/></a></div>
<div><a href="リンク先URL02" target="_blank" rel="noopener noreferrer"><img src="画像ファイル02のソース" alt="代替テキスト02" title="説明文02"/></a></div>
<div><a href="リンク先URL03" target="_blank" rel="noopener noreferrer"><img src="画像ファイル03のソース" alt="代替テキスト03" title="説明文03"/></a></div>

</div><!-- belt2の終わり -->

</div><!-- conveyerの終わり -->

conveyerブロックの中に、belt1とbelt2という2つのブロックを含み、belt1とbelt2の中は同じ内容になっていて、それぞれリンク付き画像ブロックを3つ含んでいます。実際の汎兮堂HOMEでは画像は5つですが、その場合はこの画像ブロックを5つにすればいいだけです。conveyerブロックの定義で「ontouchstart=""」とあるのは、スマホでタッチした時にPCでホバーした時と同じ挙動をするという設定です。

画像にリンクを張らない場合は、各画像ブロックのaタグは不要です。なお、aタグ内の「target="_blank" rel="noopener noreferrer"」はリンク先を新しいタブで開くための設定です。imgタグ内のalt属性は何らかの理由で画像が表示されない場合に代わりに表示される代替テキストを設定し、title属性はホバー時に表示されるツールチップに表示されるテキストを設定します。

無限ループスライダーのCSS

次にCSSのコードです。

.conveyer {
    display: flex;
    overflow: hidden;
    width: 100%;
    background: #FFFFFF; /* 画像の背後の背景色 */
}

.belt1 , .belt2 {
    display: inline-flex;
    flex: none;
    animation: belt 30s 2s linear infinite; /* スライド速度と開始遅延時間 */
}

.conveyer:hover div {
    animation-play-state: paused!important; /* ホバー時にスライダー停止 */
    .belt1 div , .belt2 div {
    flex: none;
    padding: 10px; /* 画像の間の間隔 */
}

.belt1 div:hover , .belt2 div:hover {
    transform: scale(1.1); /* ホバー時の画像拡大率 */
    transition-duration: 0.3s; /* ホバー時の画像拡大速度 */
    opacity: 0.7; /* ホバー時に透過度を上げる */
}

@keyframes belt { /* belt1とbelt2を移動させる */
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-100%);
    }
}

説明はコード内にコメントしてあるとおりです。それ以上の詳しいことは僕自身よくわかっていないのですが、コメントに書いた内容程度がわかっていればカスタマイズはできます。