Vanilla JavaScript 轮播翻译问题

Question

I tried to build a carousel with only Vanilla JavaScript but I encounter some issues along the way. The carousel should display 5 items on the page from a total of 10, and when the "next" button is clicked should slide 3 elements. The problem is that will continue to translateX after the last element in the slider was reached.

 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

The problem is in this line, you should not set it to equal because if that's not equal it continues sliding

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

I think the problem here is the more or less fixed width of each card which leads to different results on different screen sizes.

min-width: 344px;

Ive changed to (just for example)

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

and in your JavaScript something like this:

// 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;