こういう感じの表示にする
画像をスライドしたら良いポイントでスナップさせる。
scroll-snapを使う
<div class="slide-container"> <div class="slide"> <img src="/test1.jpg"> </div> <div class="slide"> <img src="/test2.jpg"> </div> <div class="slide"> <img src="/test3.jpg"> </div> <div class="slide"> <img src="/test4.jpg"> </div> <div class="slide"> <img src="/test5.jpg"> </div> </div>
.slide-container { display: flex; overflow-x: auto; width: 100%; height: 100%; -webkit-overflow-scrolling: touch; scroll-snap-type: mandatory; scroll-behavior: smooth; } .slide { width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: start; }
補足
scroll-snap-point
はdeprecatedになったので注意- 画像だけじゃなくてもCSSだけで使えるので便利。
- ただPCだと確認できない。