|
|
| 第1行： |
第1行： |
| <div class="mw-carousel-container"> | | <div class="mw-carousel" id="main-carousel"> |
| <div class="mw-carousel">
| | {{{content|}}} |
| <div class="mw-carousel-slides">
| | <div class="carousel-navigation"> |
| {{{slides|}}}
| | <button class="carousel-prev">‹</button> |
| </div>
| | <div class="carousel-indicators"></div> |
| <button class="mw-carousel-prev">❮</button>
| | <button class="carousel-next">›</button> |
| <button class="mw-carousel-next">❯</button>
| | </div> |
| <div class="mw-carousel-dots"></div>
| |
| </div>
| |
| </div> | | </div> |
|
| |
|
| <style> | | <includeonly> |
| .mw-carousel-container {
| | [[Category:使用轮播图的页面]] |
| width: 100%;
| | </includeonly> |
| 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> | |
