我的幻灯片轮播无法工作，我希望它能够手动工作吗？

Question

我想创建一个轮播，我的图像位置很好，但我的轮播没有手动使用提供的箭头，可能有一些 CSS 属性缺少我的代码。我不知道我的 javscript 代码是否可以。我还想用 CSS 属性来设计我的箭头。请看一下我下面的代码。

http://placekitten.com/g/200/300

我正在寻找一个可以手动工作的轮播，我希望它能够自动播放，但这对我来说太难了。我希望当用户单击箭头时，幻灯片会发生变化并转到下一张幻灯片。我希望您检查 CSS 并添加一些属性（特别是箭头以及轮播的其余部分）。您还可以检查我介绍的 javascript 并更正它，以便轮播正常工作吗？

document.addEventListener("DOMContentLoaded", function() {
  const carousel = document.querySelector('.carousel');
  const nextButton = document.querySelector('.carousel-button-next');
  const prevButton = document.querySelector('.carousel-button-prev');
  const slides = document.querySelectorAll('.slide');
  let currentIndex = 0;


  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    updateCarousel();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    updateCarousel();
  }

  function updateCarousel() {
    const offsetPercentage = -currentIndex * 100;
    carousel.style.transform = `translateX(${offsetPercentage}%)`;
  }

  nextButton.addEventListener('click', nextSlide);
  prevButton.addEventListener('click', prevSlide);
});

body {
  margin: 0;
  padding: 0;
}

.carousel ul {
  width: 100%;
  height: 100%;
}

.carousel-container .slide {
  width: 100%;
  height: 100%;
}

.carousel-container {
  position: relative;
  margin: 0;
  padding: 0;
}

.carousel-container button {
  position: absolute;
  z-index: 1;
  top: 50%;
}

.carousel-button-next {
  right: 32px;
}

.carousel-button-prev {
  left: 32px;
}

.carousel {
  position: relative;
}

.carousel ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide {
  position: absolute;
}

.slide>img {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  top: 50%;
  cursor: pointer;
  padding: 0;
}

.carousel-button:hover,
.carousel-button:focus {
  color: white;
}

.carousel-button:focus {
  outline: black 1px solid;
}

<main>
  <section class="carousel-container" aria-label="Newest Photos">
    <div class="carousel"></div>
    <button class="carousel-button-prev">&#10094;</button>
    <button class="carousel-button-next">&#10095;</button>
    <ul>
      <li class="slide" data-active>
        <img src="assets/woman-3597095_1280.jpg" alt="woman developer">
      </li>
      <li class="slide">
        <img src="assets/web-design-3411373_1280.jpg" alt="web design">
      </li>
      <li class="slide">
        <img src="assets/workspace-2443050_1280.jpg" alt="workspace">
      </li>
      <li class="slide">
        <img src="assets/code-1076536_1280.jpg" alt="coding">
      </li>
    </ul>

Answer 1

要使其手动，请使用 forEach 将事件侦听器添加到每个幻灯片元素以迭代幻灯片

nextButton.addEventListener('click', nextSlide);
prevButton.addEventListener('click', prevSlide);

slides.forEach(function(slide, index) {
 slide.addEventListener('click', function() {
  const direction = index > currentIndex ? 1 : -1;
  currentIndex = (currentIndex + direction + slides.length) % slides.length;
  updateCarousel();
  });
});

单击幻灯片时，它通过将单击的幻灯片的索引与当前索引（currentIndex）进行比较来计算移动方向。然后，它会相应地更新 currentIndex，以根据单击的幻灯片的位置移动到下一张或上一张幻灯片。最后，它调用 updateCarousel 函数根据新的 currentIndex 更新轮播的位置

但是，如果您希望它自动化，请创建一个函数（例如自动播放）来设置每 5000m/s 调用函数 nextSlide 的间隔（根据您的喜好更改此值）

function AutoPlay() {
 intervalId = setInterval(nextSlide, 5000); // Adjust this
}

添加另一个清除间隔的功能，“暂停”轮播

function stopAutoPlay() {
 clearInterval(intervalId);
}

如果您希望轮播在点击后停止，请修改事件监听器以停止它

nextButton.addEventListener('click', () => {
    stopAutoPlay();
    nextSlide();
});

prevButton.addEventListener('click', () => {
    stopAutoPlay();
    prevSlide();
});

最后，要在页面加载时自动启动自动播放，请调用 Autoplay 开始自动加载

AutoPlay();