|
|
| （未显示同一用户的8个中间版本） |
| 第1行： |
第1行： |
| <div class="mw-carousel-container"> | | <div class="mw-carousel" id="main-carousel"> |
| <div class="mw-carousel">
| | {{{content|}}} |
| <div class="mw-carousel-slides">
| | <html> |
| {{{slides|}}}
| | <div class="carousel-navigation"> |
| </div>
| | <button class="carousel-prev">‹</button> |
| <button class="mw-carousel-prev">❮</button>
| | <div class="carousel-indicators"></div> |
| <button class="mw-carousel-next">❯</button>
| | <button class="carousel-next">›</button> |
| <div class="mw-carousel-dots"></div>
| | </div> |
| </div>
| | </html> |
| | |
| </div> | | </div> |
|
| |
|
| <style> | | <includeonly> |
| .mw-carousel-container {
| | [[Category:使用轮播图的页面]] |
| width: 100%;
| | </includeonly> |
| margin: 0 auto 30px auto;
| | <noinclude> |
| 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;
| | <pre> |
| } | | {{轮播图 |
| | |content= |
| | {{CarouselItem |
| | |title=欢迎来到本站 |
| | |description=点此进入详细介绍 |
| | |image=Example1.jpg |
| | |link=Main_Page |
| | }} |
| | {{CarouselItem |
| | |title=查看项目 |
| | |description=使用语义维基与Cargo整合数据 |
| | |image=Example2.jpg |
| | |link=Projects |
| | }} |
| | {{CarouselItem |
| | |title=联系我们 |
| | |description=点击获取联系方式 |
| | |image=Example3.jpg |
| | |link=Contact |
| | }} |
| | }} |
| | </pre> |
| | {{轮播图 |
| | |content= |
| | {{CarouselItem |
| | |title=欢迎来到本站 |
| | |description=点此进入详细介绍 |
| | |image=Example1.jpg |
| | |link=Main_Page |
| | }} |
| | {{CarouselItem |
| | |title=查看项目 |
| | |description=使用语义维基与Cargo整合数据 |
| | |image=Example2.jpg |
| | |link=Projects |
| | }} |
| | {{CarouselItem |
| | |title=联系我们 |
| | |description=点击获取联系方式 |
| | |image=Example3.jpg |
| | |link=Contact |
| | }} |
| | }} |
|
| |
|
| @media (max-width: 768px) {
| | == 参数 == |
| .mw-carousel-prev, .mw-carousel-next {
| | * content: 包含多个幻灯片的内容 |
| 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() {
| | * [[Template:CarouselItem]]: 轮播图中单个幻灯片的模板 |
| const carousel = document.querySelector('.mw-carousel');
| | </noinclude> |
| 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> | |
描述
此模板用于在维基页面上创建一个轮播图展示框，可以用来展示多个幻灯片内容。
用法
{{轮播图
|content=
{{CarouselItem
|title=欢迎来到本站
|description=点此进入详细介绍
|image=Example1.jpg
|link=Main_Page
}}
{{CarouselItem
|title=查看项目
|description=使用语义维基与Cargo整合数据
|image=Example2.jpg
|link=Projects
}}
{{CarouselItem
|title=联系我们
|description=点击获取联系方式
|image=Example3.jpg
|link=Contact
}}
}}
参数
另见
