“下一个”箭头在轮播中过早消失

如何解决“下一个”箭头在轮播中过早消失

我需要创建一个幻灯片/轮播，为每个“幻灯片”显示多个 div（仅包含文本）。我使用 this 作为起始基础，然后从那里开始。我设法制作了 this，但不幸的是，应该进一步滑动的“下一个”箭头似乎只能在消失之前使用一次，即使至少有一张，可能还有两张幻灯片需要在到达终点之前发生。每个 div 都设置为具有自动宽度，但当我设置一个定义的宽度时，例如 240 像素，它允许我进行额外的滚动，但仍然不足以让我走到最后。

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const carousel = document.querySelector(".inner-carousel");
const track = document.querySelector(".track");
let width = carousel.offsetWidth;
let index = 0;
window.addEventListener("resize",function () {
  width = carousel.offsetWidth;
});
next.addEventListener("click",function (e) {
  e.preventDefault();
  index = index + 1;
  prev.classList.add("show");
  track.style.transform = "translateX(" + index * -width + "px)";
  if (track.offsetWidth - index * width < index * width) {
    next.classList.add("hide");
  }
});
prev.addEventListener("click",function () {
  index = index - 1;
  next.classList.remove("hide");
  if (index === 0) {
    prev.classList.remove("show");
  }
  track.style.transform = "translateX(" + index * -width + "px)";
});

* {
  Box-sizing: border-Box;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.carousel-container {
  width: 1100px;
  margin: 50px auto;
  position: relative;
}
@media (max-width: 768px) {
  .carousel-container {
    width: 95%;
  }
}
.inner-carousel {
  width: 100%;
  height: 35px;
  overflow: hidden;
}
.track {
  display: inline-flex;
  height: 100%;
  transition: transform 0.2s ease-in-out;
}
.card-container {
  width: auto;
  height: 35px;
  flex-shrink: 0;
  padding: 10px 20px;
}
.card-container:nth-of-type(1n + 2) {
  border-left: 1px solid #d3d3d3;
}
@media (max-width: 768px) {
  .card-container {
    width: 184px;
  }
}
.card {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
}
.card a {
  text-decoration: none;
  color: #848484;
  transition: 0.35s;
}
.card a:hover {
  color: #DB3545;
}

.nav button {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  border: none;
  -webkit-Box-shadow: 0px 0px 10px 0px rgba(0,0.2);
-moz-Box-shadow: 0px 0px 10px 0px rgba(0,0.2);
Box-shadow: 0px 0px 10px 0px rgba(0,0.2);
  background: #ffffff;
  font-weight: 900;
  color: #333333;
  transition: 0.35s;
}
.nav button:hover {
  color: #DB3545;
}
.nav .prev {
  left: -30px;
  display: none;
}
.nav .prev.show {
  display: block;
}
.nav .next {
  right: -30px;
}
.nav .next.hide {
  display: none;
}

<div class="carousel-container">
  <div class="inner-carousel">
    <div class="track">
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 1/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 2/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 3/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 4/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 5/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 6/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 7/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 8/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 9/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 10/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 11/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 12/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 13/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 14/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 15/15</a></div>
      </div>
    </div>
    <div class="nav">
      <button class="prev">&#8249;</button>
      <button class="next">&#8250;</button>
    </div>
  </div>
</div>

如果有什么不对的地方，请告诉我。任何帮助将不胜感激。非常感谢！

解决方法

在你的 next.Click() 中试试这个：

if (track.offsetWidth - index * width < 0) { next.classList.add("hide"); }

你隐藏得太早了。