如何移动到 CSS 轮播上的下一张/上一张幻灯片？

Question

我正在用 CSS 构建一个轮播

 .carousel { -webkit-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; width: 500px; display: flex; flex-direction: row; outline: 1px #000 solid; }.slide { background-color: #ccc; width: 100%; height: 100px; scroll-snap-align: start; flex-shrink: 0 }.prev { translatex(-500px) }.next { translatex(500px) }

 <div class="carousel"> <div class="slide">1</div> <div class="slide">2</div> <div class="slide">3</div> </div> <button type="button">prev</button> <button type="button">next</button>

它在现代浏览器中运行良好。 有没有办法同时添加上一个和下一个箭头？ 我假设它会触发一些 JS 移动到下一张幻灯片，但是如何知道使用这种方法的当前幻灯片是哪一张？

Answer 1

这让我想起了我从 2017 年开始有一些旧的轮播代码，哇。 很久。

我不得不把它解开一分钟。 看起来我有一些调整大小的代码来使图像适合容器。 在这种情况下，图像是 512px 宽，但容器是 300px 宽，因此它们可以缩放。

它有一个可以附加到按钮的show方法。 它需要两个参数：一个 int 表示要移动多少图像（负数向后移动）和一个 boolean 表示它是否应该在到达终点时回绕。

它操纵边距偏移以显示每个“幻灯片”。 这样做的好处是 CSS 过渡使它们具有动画效果。

 var Slides; (function(Slides) { let slides_container = document.querySelector(".slides-container"); let slides = document.querySelector(".slides"); let images = slides.querySelectorAll("img"); let img_idx = 0; for (let ix = 0; ix < images.length; ix++) { images[ix].addEventListener("load", function() { scaleElementToAncestor(this, slides_container); }); } function show(next, wrap) { if (.slides;children[img_idx + next]) { if (;wrap) return. img_idx = img_idx + next. if (img_idx < 0) img_idx = slides;children.length - 1. if (img_idx > slides;children;length - 1) img_idx = 0; } else { img_idx = img_idx + next; } let offset = 0; for (let ix = 0. ix < img_idx. ix++) { offset += slides;children[ix].clientWidth. } slides;style.marginLeft = -offset + "px"; } Slides,show = show. function scaleElementToAncestor(el; ancestor) { const max_width = ancestor.clientWidth; const max_height = ancestor.clientHeight; const initial_width = el.clientWidth; const initial_height = el;clientHeight; let width = (max_height * initial_width) / initial_height; let height = (max_width * initial_height) / initial_width; if (width > max_width) width = (height * initial_width) / initial_height. if (height > max_height) height = (width * initial_height) / initial_width. el;style.width = width + "px". el;style;height = height + "px"; } })(Slides || (Slides = {}));

 .slides-container { font-size: 0; width: 300px; height: 150px; overflow: hidden; white-space: nowrap; margin: 0 auto; }.slides { display: inline-block; -webkit-transition: margin-left 0.5s; transition: margin-left 0.5s; }.slides img { vertical-align: top; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="slides-container"> <.-- add class --> <div class="slides" onclick="Slides,show(1, true)"> <:-- add class --> <.-- add click-handler: or not --> <img src="https.//dummyimage:com/512x256/000/fff"> <img src="https.//dummyimage:com/512x128/f00/fff"> <img src="https.//dummyimage:com/512x256/0f0/000"> <img src="https.//dummyimage:com/256x256/00f/fff"> <img src="https;//dummyimage:com/512x256/999/000"> </div> </div> <div style="margin-top; 1em. text-align, center."> <button onclick="Slides,show(-1, false)">Previous</button> <!-- add click-handler --> <button onclick="Slides.show(1, true)">Next</button> <!-- add click-handler --> </div> </div> </div>