Tailwind CSS Carousel Components

                            <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> 
                        

                            <section class="flex items-center justify-center p-8">
  <div class="carousel-container">
    <div class="carousel w-full">
      <div id="slide1" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1454942901704-3c44c11b2ad1" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide4" class="btn btn-circle">❮</a> 
          <a href="#slide2" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide2" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1619441207978-3d326c46e2c9" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide1" class="btn btn-circle">❮</a> 
          <a href="#slide3" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide3" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide2" class="btn btn-circle">❮</a> 
          <a href="#slide4" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide4" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1508739773434-c26b3d09e071" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide3" class="btn btn-circle">❮</a> 
          <a href="#slide1" class="btn btn-circle">❯</a>
        </div>
      </div>
    </div>
    <div class="flex justify-center w-full py-2 gap-2">
      <a href="#slide1" class="btn btn-xs">1</a>
      <a href="#slide2" class="btn btn-xs">2</a>
      <a href="#slide3" class="btn btn-xs">3</a>
      <a href="#slide4" class="btn btn-xs">4</a>
    </div>
  </div>
</section>

<style>
  .carousel-container {
    width: 100%;
    max-width: 800px;
  }
  
  .carousel {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-item {
    display: none;
    width: 100%;
  }
  
  .carousel-item:target {
    display: block;
  }
  
  .w-full {
    width: 100%;
  }
  
  .relative {
    position: relative;
  }
  
  .absolute {
    position: absolute;
  }
  
  .flex {
    display: flex;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .transform {
    transform: translateY(-50%);
  }
  
  .-translate-y-1\/2 {
    transform: translateY(-50%);
  }
  
  .left-5 {
    left: 1.25rem;
  }
  
  .right-5 {
    right: 1.25rem;
  }
  
  .top-1\/2 {
    top: 50%;
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
  }
  
  .btn-circle {
    border-radius: 9999px;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .gap-2 {
    gap: 0.5rem;
  }
</style> 
                        

                            <section class="flex items-center justify-center p-8">
  <div class="carousel carousel-center rounded-box">
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1550439062-609e1531270e"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1537884944318-390069bb8665"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1542831371-29b0f74f9713"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
        alt="Coding" />
    </div>
  </div>
</section>

<style>
  .carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
  }
  
  .carousel-center {
    scroll-snap-type: x mandatory;
  }
  
  .carousel-center .carousel-item {
    scroll-snap-align: center;
  }
  
  .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> 
                        

                            <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> 
                        

                            <section class="flex items-center justify-center p-8">
  <div class="carousel-container">
    <div class="carousel">
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1527409335569-f0e5c91fa707" alt="Beach" />
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff" alt="Mountains" />
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e" alt="Forest" />
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1490730141103-6cac27aaab94" alt="Sunset" />
      </div>
    </div>
    
    <div class="carousel-nav"></div>
    
    <button class="carousel-control carousel-prev">❮</button>
    <button class="carousel-control carousel-next">❯</button>
  </div>
</section>

<style>
  .carousel-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .carousel {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .carousel-item {
    min-width: 100%;
    flex: 0 0 auto;
  }
  
  .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .carousel-nav {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .carousel-dot.active {
    background: #fff;
  }
  
  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .carousel-control:hover {
    background: rgba(255, 255, 255, 0.8);
  }
  
  .carousel-prev {
    left: 1rem;
  }
  
  .carousel-next {
    right: 1rem;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.carousel');
    const items = document.querySelectorAll('.carousel-item');
    const nav = document.querySelector('.carousel-nav');
    const prevBtn = document.querySelector('.carousel-prev');
    const nextBtn = document.querySelector('.carousel-next');
    
    let currentIndex = 0;
    const itemCount = items.length;
    
    // 创建导航点
    items.forEach((_, index) => {
      const dot = document.createElement('div');
      dot.classList.add('carousel-dot');
      if (index === 0) dot.classList.add('active');
      dot.addEventListener('click', () => {
        goToSlide(index);
        resetAutoplay();
      });
      nav.appendChild(dot);
    });
    
    const dots = document.querySelectorAll('.carousel-dot');
    
    // 切换到指定幻灯片
    function goToSlide(index) {
      carousel.style.transform = `translateX(-${index * 100}%)`;
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
      currentIndex = index;
    }
    
    // 下一张幻灯片
    function nextSlide() {
      const newIndex = (currentIndex + 1) % itemCount;
      goToSlide(newIndex);
    }
    
    // 上一张幻灯片
    function prevSlide() {
      const newIndex = (currentIndex - 1 + itemCount) % itemCount;
      goToSlide(newIndex);
    }
    
    // 设置自动播放
    let autoplayInterval = setInterval(nextSlide, 3000);
    
    // 重置自动播放计时器
    function resetAutoplay() {
      clearInterval(autoplayInterval);
      autoplayInterval = setInterval(nextSlide, 3000);
    }
    
    // 按钮事件监听
    nextBtn.addEventListener('click', () => {
      nextSlide();
      resetAutoplay();
    });
    
    prevBtn.addEventListener('click', () => {
      prevSlide();
      resetAutoplay();
    });
    
    // 鼠标悬停时暂停自动播放
    carousel.addEventListener('mouseenter', () => {
      clearInterval(autoplayInterval);
    });
    
    // 鼠标移出时恢复自动播放
    carousel.addEventListener('mouseleave', () => {
      autoplayInterval = setInterval(nextSlide, 3000);
    });
  });
</script>