スライド風　複数の写真を横スクロール表示してみよう—東京でホームページ制作

プラグインを使わず　スライド風に、複数の写真を横スクロール表示してみましょう!

こちらのスライド風タイプは、簡単なスタイルシートでどうにかなります。

写真を連結して横長のイメージを作ってしまうのがミソです。

ではでは、レッツチャレンジ!!!

1.まずは横長のイメージを作成し、メディアを追加からアップロードします。

↓こんな感じ!　サイズは1666×133

2.スタイルシートに下記をコード追加します。

.bg-image-loop {
	width: 100%;
	height: 133px; /* 画像の高さを指定 */
	position: relative;
	background: url("https://xn--yck7ccu3lc5134chfbh96gpil.com/wp-content/uploads/2020/05/d2f0a0b495a156c9d2597602b79c741a.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 23s linear infinite; 
	margin: 80px 0;
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1666px 0; } /* 1666pxは使用した背景画像の長さ */
}

3.最後にhtmlコードを記述します。

<div class="bg-image-loop"> </div>

こんな感じになります!

　 　 ※追記 ★スマートフォンスの時、タイルシートで画像イメージの高さを調整すると、ループ時にカクっと戻されるような表示になる場合がある。 →解決方法　写真をスマートフォン時用にリサイズしたものを利用する。 ★横幅4000px以上の画像を利用すると、アンドロイドスマートフォン時に、ループ表示何回目かに真っ白くなってしまう場合がある。 →解決方法　写真の横幅は2000px以下にリサイズしたものを利用する。