查看“︁模板:轮播图”︁的源代码

<div class="mw-carousel-container">
  <div class="mw-carousel">
    <div class="mw-carousel-slides">
      {{{slides|}}}
    </div>
    <button class="mw-carousel-prev">&#10094;</button>
    <button class="mw-carousel-next">&#10095;</button>
    <div class="mw-carousel-dots"></div>
  </div>
</div>

<style>
.mw-carousel-container {
  width: 100%;
  margin: 0 auto 30px auto;
  position: relative;
}

.mw-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mw-carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
}

.mw-carousel-slide {
  flex: 0 0 100%;
  position: relative;
}

.mw-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.mw-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
  padding: 15px;
  color: white;
}

.mw-carousel-caption h3 {
  margin: 0 0 5px 0;
  color: white;
}

.mw-carousel-caption p {
  margin: 0;
  font-size: 0.9em;
}

.mw-carousel-prev, .mw-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.5);
  color: #000;
  border: none;
  padding: 12px 16px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.mw-carousel-prev:hover, .mw-carousel-next:hover {
  background-color: rgba(255,255,255,0.8);
}

.mw-carousel-prev {
  left: 10px;
}

.mw-carousel-next {
  right: 10px;
}

.mw-carousel-dots {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

.mw-carousel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
}

.mw-carousel-dot.active {
  background-color: white;
}

@media (max-width: 768px) {
  .mw-carousel-prev, .mw-carousel-next {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .mw-carousel-caption {
    padding: 10px;
  }
  
  .mw-carousel-caption h3 {
    font-size: 16px;
  }
  
  .mw-carousel-caption p {
    font-size: 12px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.mw-carousel');
  const slidesContainer = carousel.querySelector('.mw-carousel-slides');
  const slides = carousel.querySelectorAll('.mw-carousel-slide');
  const prevButton = carousel.querySelector('.mw-carousel-prev');
  const nextButton = carousel.querySelector('.mw-carousel-next');
  const dotsContainer = carousel.querySelector('.mw-carousel-dots');
  
  let currentIndex = 0;
  const slideCount = slides.length;
  
  // Create dots
  for (let i = 0; i < slideCount; i++) {
    const dot = document.createElement('span');
    dot.classList.add('mw-carousel-dot');
    if (i === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToSlide(i));
    dotsContainer.appendChild(dot);
  }
  
  // Update display
  function updateCarousel() {
    slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
    
    // Update dots
    const dots = dotsContainer.querySelectorAll('.mw-carousel-dot');
    dots.forEach((dot, index) => {
      if (index === currentIndex) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }
  
  // Go to specific slide
  function goToSlide(index) {
    currentIndex = index;
    updateCarousel();
  }
  
  // Previous slide
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateCarousel();
  }
  
  // Next slide
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateCarousel();
  }
  
  // Event listeners
  prevButton.addEventListener('click', prevSlide);
  nextButton.addEventListener('click', nextSlide);
  
  // Auto slide (optional)
  let autoSlideInterval = setInterval(nextSlide, 5000);
  
  carousel.addEventListener('mouseenter', () => {
    clearInterval(autoSlideInterval);
  });
  
  carousel.addEventListener('mouseleave', () => {
    autoSlideInterval = setInterval(nextSlide, 5000);
  });
  
  // Touch support
  let touchStartX = 0;
  let touchEndX = 0;
  
  carousel.addEventListener('touchstart', e => {
    touchStartX = e.changedTouches[0].screenX;
  });
  
  carousel.addEventListener('touchend', e => {
    touchEndX = e.changedTouches[0].screenX;
    if (touchEndX < touchStartX - 50) {
      nextSlide();
    } else if (touchEndX > touchStartX + 50) {
      prevSlide();
    }
  });
});
</script>