Carousel Autoplay

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