画像を横スクロールする方法

画像を横スクロールする方法です｡割と簡単にできます｡以下のようになります｡

HTML

<div class="item">
<figure><img src="images/cloud.JPG" alt="画像"></figure>
<figure><img src="images/sakura.JPG" alt="画像"></figure>
<figure><img src="images/tou.JPG" alt="画像"></figure>
<figure><img src="images/compo.JPG" alt="画像"></figure>
<figure><img src="images/yama.jpg" alt="画像"></figure>
</div>

画像の下にスライドが出ます｡ここをクリックし､移動させると画像が切り替わります｡

あまり使い道はないか｡思うところはありますね｡意図的にしたい場合は､お試しあれ｡

やっていることは簡単で､itemで画像を囲んでいるだけです｡

SCSS

.item{
overflow-x: scroll;
display: flex;

figure img{
width: 100vw;
height: 400px;
object-fit: cover;
object-position: bottom;
}
}

itemにoverflow-x: scrollを書き､横方向にスライド出来るようにスクロールバーを表示します｡そのあと､display: flexで画像を横並びにします｡

imgにたいして､width: 100vwにし､ウィンドウに1つの画像にします｡あとは､height､object-fit: cover､object-position: bottomを書きます｡

object-fit: coverは､画像の幅と高さを指定するため､そうなると､画像が不自然になります｡そこで､これを使い､画像がおかしくないようにしています｡

ちなみに､object-position: bottomは画像の位置を調整しています｡

CSS

.item {
  overflow-x: scroll;
  display: flex;
}
.item figure img {
  width: 100vw;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}

さいごに

わりと簡単なコードで実現できます｡あまり使い道はないですが､こういう方法もあると､ご理解ください｡