スライド風 複数の写真を横スクロール表示してみよう—東京でホームページ制作
プラグインを使わず スライド風に、複数の写真を横スクロール表示してみましょう!
こちらのスライド風タイプは、簡単なスタイルシートでどうにかなります。
写真を連結して横長のイメージを作ってしまうのがミソです。
ではでは、レッツチャレンジ!!!
1.まずは横長のイメージを作成し、メディアを追加からアップロードします。
↓こんな感じ! サイズは1666×133
2.スタイルシートに下記をコード追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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コードを記述します。
|
1 |
<div class="bg-image-loop"> </div> |
お問合せ