"Next" 旋转木马中的箭头过早消失

Question

我需要创建一个 slideshow/carousel 每个“幻灯片”显示多个 div（仅包含文本）。我使用了 this as a starting base, and went from there. I managed to make this，但不幸的是，应该进一步滑动的“下一个”箭头似乎只能在消失前使用一次，即使之前至少需要一个，可能还有两个幻灯片到达终点。每个 div 都设置为具有自动宽度，虽然当我设置一个定义的宽度时，比如 240px，它允许我做一个额外的滚动，虽然它仍然不足以让我结束。

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,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,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>

如果有任何问题，请告诉我。任何帮助将不胜感激。非常感谢！

Answer 1

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

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

你隐藏得太早了。

"Next" 旋转木马中的箭头过早消失

"Next" Arrow Disappearing Too Early in Carousel

html

javascript

css

slideshow

carousel