如何移動到 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>