Horizontal scrolling cards

We can use simple CSS settings to scroll cards horizontally in a container.

Apply these settings to the container <div>:

.horizontal-scrolling-container {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  • Enable the horizontal scroll bar,
  • Hide the vertical scroll bar,
  • Disable wrapping to force every card in one line.container
  • Enable the bouncing stop at the last card on iOS.

Configure the card <div>s with this:

  .card {
    display: inline-block;
  • Force every card into one horizontal line.

Leave a comment

Your email address will not be published. Required fields are marked *