我的 JS/CSS 滑块在第一张幻灯片后停止工作。 我该如何解决这个问题？

Question

I just made a slider in CSS and JS and I have encountered a problem which is: after the first slide the slider stops and i can't click the button. I tried so many things, I changed the slide width, z-index of every element and even some parts of the scripts but nothing seems to work. It seems to work only in Firefox, but not in chrome.

document.addEventListener('DOMContentLoaded', () => {

const SLIDETIME = 500; //ms
// --------------------------

const backButton = document.querySelector('.wbn-slider-back-btn');
const forwardButton = document.querySelector('.wbn-slider-next-btn');
// Select all slides and convert node to array for easy handling
const allSlides = Array.from(document.querySelectorAll('.wbn-slide'));
 //const allSlides = [...document.querySelectorAll('.wbn-slide')];
let clickable = true;
let active = null;
let newActive = null;

function initSlider() {
  // Set the CSS transition on the slides to the value we specified in SLIDETIME above
  allSlides.forEach(slide =>
    slide.setAttribute(
      'style',
      `transition: transform ${SLIDETIME}ms ease;
                   animation-duration: ${SLIDETIME}ms`,
    ),
  );
}

function changeSlide(forward) {
  if (clickable) {
    clickable = false;
    active = document.querySelector('.active');
    const activeSlideIndex = allSlides.indexOf(active);

    if (forward) {
      console.log('activeSlideIndex: ', activeSlideIndex);
      console.log('allSlides.length: ', allSlides.length);
      console.log('new slide: ', (activeSlideIndex + 1) % allSlides.length);

      newActive = allSlides[(activeSlideIndex + 1) % allSlides.length];
      active.classList.add('slideOutLeft');
      newActive.classList.add('slideInRight', 'active');
    } else {
      console.log('activeSlideIndex: ', activeSlideIndex);
      console.log('allSlides.length: ', allSlides.length);
      console.log('new slide: ', (activeSlideIndex - 1 + allSlides.length) % allSlides.length);

      newActive =
        allSlides[
          (activeSlideIndex - 1 + allSlides.length) % allSlides.length
        ];
      active.classList.add('slideOutRight');
      newActive.classList.add('slideInLeft', 'active');
    }
  }
}

allSlides.forEach(slide => {
  slide.addEventListener('transitionend', e => {
    // Check for the old active transition and if clickable is false
    // to not trigger it more than once
    if (slide === active && !clickable) {
      clickable = true;
      // Remove all CSS animation classes on old active
      active.className = 'wbn-slide';
    }
  });
});

//Event listeners
forwardButton.addEventListener('click', () => {
  changeSlide(true);
});
backButton.addEventListener('click', () => {
  changeSlide(false);
});

// Init the slider
initSlider();

}); this is the JS code i'm using, and the following is the CSS:

.slider-team{
  flex-shrink: 0;
    overflow: hidden;
    width: 39.41667vw ;
    height: 39.58333vw;
}
.wbn-slide {
  position: absolute;
  z-index: 500;
}
.wbn-slide img {
  object-fit: cover;
  pointer-events: none;
}

.slideInLeft {
  animation-name: animateInLeft;
  z-index: 800;
}

.slideInRight {
  animation-name: animateInRight;
  z-index: 800;
}

.slideOutLeft {
  transform: translateX(-0%);
}

.slideOutRight {
  transform: translateX(0%);
}
@keyframes animateInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes animateInRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.active{
  z-index: 1000;
}
.wbn-overlay-text {
  text-align: center;
  position: absolute;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  top: 0;
  left: 0;
  z-index: 10000;
  opacity: 1;
}

.wbn-overlay-text .wbn-header {
  font-family: 'Italiana', serif;
  font-size: 80px;
  font-weight: 400;
}

.wbn-overlay-text .wbn-text {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: white;
  max-width: 30%;
}
.wbn-buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 48%;
  height: 100%;
  z-index: 20000 !important;
}

.wbn-slider-back-btn,
.wbn-slider-next-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-size: 20px;
  opacity: 0.7;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  transition: all 0.2s;
  margin: 20px;
}

.wbn-slider-back-btn:hover,
.wbn-slider-next-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

And this is the HTML code:

<div class="slider-team">
                <div class="wbn-slide">
                    <img src=<?php echo get_template_directory_uri(). '/img/slide1.jpg'?> alt="">
                    <div class="wbn-overlay-text">
                        <span class="wbn-header">BEATRICE <br>BORELLINI</span>
                        <span class="wbn-text">ART DIRECTOR</span>
                    </div>
                </div>
                <div class="wbn-slide">
                    <img src=<?php echo get_template_directory_uri(). '/img/slide2.jpg'?> alt="">
                    <div class="wbn-overlay-text">
                        <span class="wbn-header">NICCOLO' <br> BIANCHI</span>
                        <span class="wbn-text">CEO & WEB DESIGNER</span>
                    </div>
                </div>
                <div class="wbn-slide active"><img src=<?php echo get_template_directory_uri(). '/img/slide3.jpg'?> alt="">
                  <div class="wbn-overlay-text">
                        <span class="wbn-header">PAOLA <br> MAZZONI</span>
                        <span class="wbn-text">CEO</span>
                    </div>
                </div>

                  <div class="wbn-buttons">
        <div class="wbn-slider-back-btn">
          <span><img src=<?php echo get_template_directory_uri(). '/img/Freccia.png'?> alt=""> </span>
        </div>

        <div class="wbn-slider-next-btn">
          <span><img src=<?php echo get_template_directory_uri(). '/img/Freccia.png'?> alt=""> </span>
        </div>
            </div>

Answer 1

在代码执行的每一步之后使用 console.log/alert，你会发现它卡住的地方，在小提琴它不起作用，