模板:轮播图：修订间差异
跳转到导航
跳转到搜索
（创建页面，内容为“<div class="carousel"> <div class="carousel-images"> {{#ask: Category:Images |?image |?link |format=template |template=轮播图模板 |limit=10 }} </div> <div class="prev" onclick="moveSlide(-1)"><</div> <div class="next" onclick="moveSlide(1)">></div> <div class="indicators"> {{#ask:Category:Images |format=template |template=指示器 |limit=10 }} </div> </div> {{#css:.carouse…”） |
无编辑摘要 |
||
| 第57行： | 第57行： | ||
} | } | ||
}} | }} | ||
<includeonly> | |||
<script type="text/javascript"> | |||
let currentSlide = 0; | |||
function showSlide(index) { | |||
const slides = document.querySelectorAll('.slide'); | |||
if(index >= slides.length) currentSlide = 0; | |||
if(index < 0) currentSlide = slides.length - 1; | |||
const offset = -currentSlide * 100; | |||
document.querySelector('.carousel-images').style.transform = `translateX(${offset}%)`; | |||
} | |||
function moveSlide(direction) { | |||
showSlide(currentSlide += direction); | |||
} | |||
showSlide(currentSlide); | |||
</script> | |||
</includeonly> | |||
2024年8月18日 (日) 03:53的版本
<
>