コンベアスライドショー　CSSのみで実装

サンエツカラミー

html

	
<!--バナーエリア-->	
	
		<div class="container-fluid">
	<div class="row  mb-md-5  justify-content-center">
	<div class="col-xl-8 bnrArea1">
		
	<div class="row">
<!--コンベアスライドショー1-->		
<div class="xslider_wrap" ontouchstart="">

<div class="xslider1">

<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=1"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/catalog.png" class="img-fluid mx-auto w-100" alt="カタログギフト"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=2"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/toyamafood.png" class="img-fluid mx-auto w-100" alt="富山の食品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=3"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/food.png" class="img-fluid mx-auto w-100" alt="食品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=4"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/towel.png" class="img-fluid mx-auto w-100" alt="タオル・繊維"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=5"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/origin.png" class="img-fluid mx-auto w-100" alt="サンエツオリジナル品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=6"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/baby.png" class="img-fluid mx-auto w-100" alt="ベビー用品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=7"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/soap.png" class="img-fluid mx-auto w-100" alt="ソープ・石鹸・洗剤"/></a></div>

</div><!-- xslider1 -->
	
	
	
	
	

<div class="xslider2">

<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=1"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/catalog.png" class="img-fluid mx-auto w-100" alt="カタログギフト"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=2"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/toyamafood.png" class="img-fluid mx-auto w-100" alt="富山の食品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=3"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/food.png" class="img-fluid mx-auto w-100" alt="食品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=4"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/towel.png" class="img-fluid mx-auto w-100" alt="タオル・繊維"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=5"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/origin.png" class="img-fluid mx-auto w-100" alt="サンエツオリジナル品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=6"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/baby.png" class="img-fluid mx-auto w-100" alt="ベビー用品"/></a></div>
	
<div><a href="http://chancemaker.shop-pro.jp/?mode=cate&cbid=1455366&csid=7"><img src="https://www.sanetsu.com/n-image/colorme/btn/category/soap.png" class="img-fluid mx-auto w-100" alt="ソープ・石鹸・洗剤"/></a></div>

</div><!-- xslider2 -->

</div><!-- xslider_wrap -->	
		
<!--コンベアスライドショー1終了-->			
	</div>

css




.xslider_wrap {
    display: flex;
    overflow: hidden;
    width: 100%;
    background: #cee5f2;
    border: 1px solid #CCCCCC;
}

.xslider1 , .xslider2 {
	display: inline-flex;
	flex: none;
	animation: xslider 30s 2s linear infinite;
}

.xslider_wrap:hover div {
	animation-play-state: paused!important;
}

.xslider1 div , .xslider2 div {
	flex: none;
	padding: 10px;
}

.xslider1 div:hover , .xslider2 div:hover {
	transform: translateY(-5px);
}



@keyframes xslider {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-100%);
	}
}

参照元

【CSSのみ】カルーセル、横スライドショー【自動で動く】

コンベア的な動きをするカルーセル（スライドショー、スライダーともいう）の作り方を下記に載せます。
HTMLとCSSのみで作成でき、自動で動きます。それぞれのアイテムにリンクを貼ることもできます。

Chrome、Edge、Firefoxで動作確認済みです。注意画像の遅延読み込みをしていると挙動があやしくなる可能性があります。

目次 [表示]

HTML

<div class=”xslider_wrap” ontouchstart=””>
<div class=”xslider1“>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
</div><!– xslider1 –>
<div class=”xslider2“>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
<div><a href=””><img src=””></a></div>
</div><!– xslider2 –>
</div><!– xslider_wrap –>

view raw.html hosted with ❤ by GitHub

構造

xslider_wrapxslider1xslider2

「xslider_wrap」という名前のdivの上に、「xslider1」と「xslider2」という2つのdivを載せて動かしています。
2つのdivを同時に動かすことにより、すきまなくアイテムが流れているように見せることができます。
個別のアイテムは「xslider1」「xslider2」に載せていきます（これも各々をdivで括ります）。

xslider1アイテム1アイテム2アイテム3

注意点

  • 1行目に「ontouchstart=””」という記述がありますが、これはスマホでアイテムをタッチした時に、パソコンでマウスホバーした時の動きを適用させるというものです。
  • 「xslider1」と「xslider2」に載せるアイテムの内容は、必ずしも同一でなくとも大丈夫ですが、「xslider1」と「xslider2」の幅を同じにする必要があるので、できれば同一の内容の方が望ましいです。
  • 「xslider1」と「xslider2」、それぞれに載せるアイテム数は、各アイテムの幅にもよりますが、5~7個くらいが最適なようです（「xslider1」が「xslider_wrap」から少しはみ出るくらい）。アイテム数が少なすぎても多すぎても、すきまができたりアイテムが重なったりする可能性があります。
  • アイテムを増やす時は、<div><a href=""><img src=""></a></div>の数を増やしてください。

CSS

.xslider_wrap {
display: flex;
overflow: hidden;
width: 100%;
background: #e2ffc4;
box-shadow: 0 2px 5px #999;
}
.xslider1 , .xslider2 {
display: inline-flex;
flex: none;
animation: xslider 30s 2s linear infinite;
}
.xslider_wrap:hover div {
animation-play-state: paused!important;
}
.xslider1 div , .xslider2 div {
flex: none;
padding: 10px;
}
.xslider1 div:hover , .xslider2 div:hover {
transform: translateY(-5px);
}
@keyframes xslider {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

view raw.css hosted with ❤ by GitHub

1～7行目

「xslider_wrap」（外枠）のスタイルです。

4行目「width」で横幅、
5行目「background」で背景色、
6行目「box-shadow」で影

の指定をしています。お好みで変更、削除ができます。

9～13行目

「xslider1」と「xslider2」のスタイルです。12行目の「30s」という部分でスライドの速度を変更できます。数字を大きくすると速くなり、小さくすると遅くなります。アイテム数により早く感じたり遅く感じたりすると思いますので、適宜変更してください。

また、その横の「2s」という部分で、スライダーの開始時間を2秒遅らせています（初動を安定させるため）。この数字を大きくすると開始がますます遅くなり、小さくすると少し早まります。
アイテム数が多く、初動が安定しない場合、これをもっと遅らせると安定するかもしれません（その場合、なるべくWebサイトの下部に設置した方がよさそうです）。

余談1：「display:inline-flex;」について

display:inline-flex;アイテム1アイテム2アイテム3

display:flex;アイテム1アイテム2アイテム3

「xslider1」と「xslider2」に「display:inline-flex;」をつけています。
「display:inline-flex;」は、「display:inline-flex;」をつけた要素自体の幅を、その中身の幅にしてくれるようです。
「display:flex;」だとブロック要素になるので、中身が少なくても「width:100%;」になります。

「xslider1」「xslider2」の各幅が「width:100%」より大きければ「flex」でも問題なさそうなのですが、念のため「display:inline-flex;」の方を採用しました。

余談2：「flex: none;」について

このスライダーを作り始めた時に、「xslider1」と「xslider2」が重なる現象が起き悩まされたのですが、それを解決してくれたのが11行目の「flex: none;」です。

15～17行目

「xslider_wrap」をhoverするとスライダーが一時停止します。

19～22行目

アイテムを入れるdivのスタイルです。21行目「padding: 10px;」で各アイテムの間隔を調整できます。数字を大きくすると間隔が広くなり、小さくすると狭くなります。

余談：再度登場の「flex: none;」について

20行目、またしても「flex: none;」が登場します。こちらにも入れておかないと、アイテム画像がとても小さく表示されてしまいます。
画像が小さくなるのを直すだけなら「flex-shrink:0;」でもいいのですが、flexプロパティでいっぺんに指定した方がいいようなので「flex: none;」としました。

24～26行目

アイテムをホバーした時に、5px分上にピョコっと移動します。数字を大きくすると更に上に移動します。
下に下げたい場合は正数にしてください。

28～35行目

要素を動かす記述です。「xslider」という名前をつけて、それを「xslider1」と「xslider2」に適用しています。それぞれが「横軸0（その要素の始まりの位置）から-100％（その要素の幅分左側に動かした位置）まで動く」ということを表しています。

0％の記述はいらないような気もしたのですが、同じような質問を見つけ、念のため入れた方がいいよ、的な回答がついていたので入れることにしました。

あとがき

これを作るまでは、jQueryで作ったスライダーを使っていたのですが、WordPressの読み込みのタイミングのせいなのかなんなのか、たまに表示されない時があって気になっていました。時代的にも「脱jQuery」の流れのようなので、今回CSSのみで動くスライダーに挑戦してみました。
今の時代、CSSでここまでできるのかとビックリ、そして勉強になりました。ありがたい時代になったものですねェ。追記Jetpackの「画像の遅延読み込み」を無効にした所、jQueryのスライダーの調子も良くなりました。「画像の遅延読み込み」はスライダーと相性が悪いのかも……？

関連記事：別のタイプのスライドショー

横スライドショー（jQuery）

こちらはjQueryを使った横スライドショーです。

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です