Carousel Vertical

                    <section class="flex items-center justify-center p-8">
  <div class="carousel carousel-vertical rounded-box h-96">
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1517849845537-4d257902454a"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1543466835-00a7907e9de1"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1548681528-6a5c45b66b42"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1574068468668-a05a11f871da"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a"
        alt="Animal" />
    </div>
    <div class="carousel-item h-full">
      <img 
        src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba"
        alt="Animal" />
    </div>
  </div>
</section>

<style>
  .carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
  }
  
  .carousel-vertical {
    flex-direction: column;
    height: 24rem;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
  
  .carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  
  .carousel-vertical .carousel-item {
    width: 100%;
    height: 100%; /* 全高显示 */
  }
  
  .carousel-item img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  
  .carousel-vertical .carousel-item img {
    width: 100%;
    height: 100%;
  }
  
  .rounded-box {
    border-radius: 0.5rem;
  }
  
  .h-96 {
    height: 24rem;
  }
  
  .h-full {
    height: 100%;
  }
</style>