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.