とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

cssだけでインスタグラムみたいに複数の画像をスライドしていい感じに固定する

こういう感じの表示にする

f:id:ka2jun8:20181111125728g:plain

画像をスライドしたら良いポイントでスナップさせる。

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だと確認できない。