Carousel Basic

                    <section class="flex items-center justify-center p-8">
  <div class="carousel rounded-box">
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1565958011703-44f9829ba187"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543"
        alt="Food" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1484723091739-30a097e8f929"
        alt="Food" />
    </div>
  </div>
</section>

<style>
  .carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
  }
  
  .carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  
  .carousel-item img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  
  .rounded-box {
    border-radius: 0.5rem;
  }
</style>