HTML, CSS で横スクロールするスライダーを作成する方法

✏️️ 2019/08/21 👍️2019/08/21 🔗

横スクロールできるスライダーを作成します。

HTML

<div class="section is-paddingless-horizontal">
  <ul class="x-scroll-list">
     <li class="x-scroll-item">Item</li>
     <li class="x-scroll-item">Item</li>
     <li class="x-scroll-item">Item</li>
     <li class="x-scroll-item">Item</li>
     <li class="x-scroll-item">Item</li>
  </ul>
</div>

CSS

.x-scroll-list {
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling: touch;
}


 .x-scroll-list::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}

 .x-scroll-item {
  display: inline-block;
  margin-right: 0.1rem;
}
  • overflow-x: scroll ; : 養素がボックスからはみ出した場合スクロールにします。
  • white-space: nowraop; ボックスサイズが指定されている場合にも自動改行しない
  • -ms-overflow-style:none; : IEでスクロールバーを表示しない
  • -webkit-overflow-scrolling: touch; iOSで惰性でスクロールさせる
  • selector::-webkit-scrollbar : webkit系でスクロールバーを表示させない

以上で、HTML, CSS で横スクロールするスライダーを作成する方法は完了です。

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。