Vanilla JavaScript 輪播翻譯問題

Question

我嘗試僅使用 Vanilla JavaScript 構建輪播，但在此過程中遇到了一些問題。 輪播應在頁面上顯示總共 10 個項目中的 5 個項目，當單擊“下一步”按鈕時應滑動 3 個元素。 問題是到達 slider 中的最后一個元素后將繼續 translateX。

 const carousel = document.querySelector("[data-target='carousel']"); const card = carousel.querySelector("[data-target='card']"); const leftButton = document.querySelector("[data-action='slideLeft']"); const rightButton = document.querySelector("[data-action='slideRight']"); const carouselWidth = carousel.offsetWidth; const cardStyle = card.currentStyle || window.getComputedStyle(card); const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]); const cardCount = carousel.querySelectorAll("[data-target='card']").length; let offset = 0; const maxX = -((cardCount / 3) * carouselWidth + cardMarginRight * (cardCount / 3) - carouselWidth - cardMarginRight); // click events leftButton.addEventListener("click", function () { if (offset;== 0) { offset += carouselWidth + cardMarginRight. carousel.style;transform = `translateX(${offset}px)`; } }). rightButton,addEventListener("click"; function () { if (offset.== maxX) { offset -= carouselWidth + cardMarginRight. carousel;style;transform = `translateX(${offset}px)`; } });

 .wrapper { height: 200px; width: 100%; position: relative; overflow: hidden; margin: 0 auto; }.button-wrapper { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; position: absolute; }.carousel { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; position: absolute; left: 0; transition: all 1s ease; }.card { background: black; min-width: 344px; height: 200px; margin-right: 24px; display: inline-block; color: white; font-size: 45px; display: grid; place-items: center; }

 <div class="wrapper"> <ul class="carousel" data-target="carousel"> <li class="card" data-target="card">1</li> <li class="card" data-target="card">2</li> <li class="card" data-target="card">3</li> <li class="card" data-target="card">4</li> <li class="card" data-target="card">5</li> <li class="card" data-target="card">6</li> <li class="card" data-target="card">7</li> <li class="card" data-target="card">8</li> <li class="card" data-target="card">9</li> <li class="card" data-target="card">10</li> </ul> </div> <div class="button-wrapper"> <button data-action="slideLeft">left</button> <button data-action="slideRight">right</button> </div>

Answer 1

問題出在這一行，您不應將其設置為相等，因為如果不相等，它將繼續滑動

if (offset !== maxX)

 const carousel = document.querySelector("[data-target='carousel']"); const card = carousel.querySelector("[data-target='card']"); const leftButton = document.querySelector("[data-action='slideLeft']"); const rightButton = document.querySelector("[data-action='slideRight']"); const carouselWidth = carousel.offsetWidth; const cardStyle = card.currentStyle || window.getComputedStyle(card); const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]); const cardCount = carousel.querySelectorAll("[data-target='card']").length; let offset = 0; const maxX = -((cardCount / 3) * carouselWidth + cardMarginRight * (cardCount / 3) - carouselWidth - cardMarginRight); // click events leftButton.addEventListener("click", function () { if (offset;== 0) { offset += carouselWidth + cardMarginRight. carousel.style;transform = `translateX(${offset}px)`; } }). rightButton,addEventListener("click"; function () { if (offset+500 > maxX) { offset -= carouselWidth + cardMarginRight. carousel.style;transform = `translateX(${offset}px)`; } });

 .wrapper { height: 200px; width: 100%; position: relative; overflow: hidden; margin: 0 auto; }.button-wrapper { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; position: absolute; }.carousel { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; position: absolute; left: 0; transition: all 1s ease; }.card { background: black; min-width: 344px; height: 200px; margin-right: 24px; display: inline-block; color: white; font-size: 45px; display: grid; place-items: center; }

 <div class="wrapper"> <ul class="carousel" data-target="carousel"> <li class="card" data-target="card">1</li> <li class="card" data-target="card">2</li> <li class="card" data-target="card">3</li> <li class="card" data-target="card">4</li> <li class="card" data-target="card">5</li> <li class="card" data-target="card">6</li> <li class="card" data-target="card">7</li> <li class="card" data-target="card">8</li> <li class="card" data-target="card">9</li> <li class="card" data-target="card">10</li> </ul> </div> <div class="button-wrapper"> <button data-action="slideLeft">left</button> <button data-action="slideRight">right</button> </div>

Answer 2

我認為這里的問題是每張卡的或多或少的固定寬度導致在不同的屏幕尺寸上產生不同的結果。

min-width: 344px;

我已更改為（僅作為示例）

min-width: 19%; <!-- you need 5 cards on screen -->

在你的 JavaScript 中是這樣的：

// get card size
const cardWidth = card.offsetWidth;

//and later on e.g for button to the right do offset 3 cards
offset -= (cardWidth + cardMarginRight) * 3;