<div class="carouselWrapper">
  <div class="carouselContainer">
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FFFF00/000000/?text=Carousel+Item+21" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FF0000/FFFFFF/?text=Carousel+Item+22" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/00FF00/000000?text=Carousel+Item+23" alt="" />
    </div>
  </div>
</div>
.carouselWrapper {
  position: relative;
}

.carouselContainer {
  display: flex;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: 0;
  scrollbar-color: transparent transparent;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  .carouselItem {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
    scroll-snap-align: center;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.