Vanilla JavaScript转盘翻译问题

Question

我试图只使用Vanilla JavaScript构建一个旋转木马，但在这个过程中遇到了一些问题。转盘应在页面上显示总共10个项目中的5个项目；下一个"；点击按钮应滑动3个元素。问题是，在到达滑块中的最后一个元素后，将继续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;