アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

いい感じにdivをスライドさせる

CSSとHTMLだけで、divを横にスルッとスライドさせるやつ(語彙力)
スライドショーみたいに勝手にうごくやつじゃなくて、クリックして次に進むタイプ。

サンプル
下のグレーの部分の「つぎへ」等をクリックすると、左右にスライドします
このサンプルは何故か自分の環境で見ると若干カクつくけど、同じソースをローカルで試すとそんなことはない。

CSS

.slides {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}
.slides > div {
  flex-shrink: 0;
  width: 100%;
  height: max-content;
}

HTML

<div class="slider">
  <div class="slides">
    <div id="slide-1">
      <a href="#slide-2">つぎへ</a>
    </div>
    <div id="slide-2">
      <a href="#slide-1">まえへ</a><br><a href="#slide-3">つぎへ</a>
    </div>
    <div id="slide-3">
      <a href="#slide-2">まえへ</a><br><a href="#slide-1">さいしょへ</a>
    </div>
  </div>
</div>

以上。CSS苦手マンなのでこれだけでいいのかと感動した。
趣味でアンケート実装するときに使いました。
選択肢によって次の質問変えたりという複雑なことをしたかったけど、
ページ遷移しつつPHPで処理…みたいなことしたくなかったので、
JSでごりごり実装しつつこういう見栄えだけはCSSでできるように。