JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<ul id="carousel">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CSS

#carousel{
  display: flex;
  gap: 10px;

  > li{
    list-style: none;
    flex: none;
    width: 300px;
    height: 300px;
    border: 1px solid black;

  }
}

#carousel {
  overflow-y: auto;
  scroll-snap-type: x mandatory;

  > li {
    scroll-snap-align: center; 
  }

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
}