Исправлена ​​ошибка с точками для отображения слайдов в карусели

Question

Я почти закончил свою идеальную карусель, за исключением того, что я попытался добавить точки, обозначающие слайды, которые не работают должным образом, .active класс в .dot ведет себя странно, чтобы увидеть вот кодовый код .

Вот HTML, который я использовал:

<div class="carousel-container">
    <i class="fas fa-chevron-left" id="prevBtn"></i>
    <i class="fas fa-chevron-right" id="nextBtn"></i>
    <div class="carousel-slide">
        <img src="https://images.unsplash.com/photo-158&q=80" class="firstSlide" alt="">
        ...
    </div>
</div>

<div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>

, а вот JavaScript, который я использовал:

/* carousel */
const carousel_slide = document.querySelector(".carousel-slide");
const carousel_images = document.querySelectorAll(".carousel-slide img");

const dots = document.querySelector(".dots");
const dot = document.querySelectorAll(".dot");

const prev_btn = document.querySelector("#prevBtn");
const next_btn = document.querySelector("#nextBtn");

// counter
let counter = 0;
let size = carousel_images[0].clientWidth;

carousel_slide.insertAdjacentHTML(
  "afterbegin",
  carousel_images[carousel_images.length - 1].outerHTML
);
carousel_slide.insertAdjacentHTML("beforeend", carousel_images[0].outerHTML);
carousel_slide.style.transform = `translateX(${-size * 1}px)`;

// carousel_slide.style.transform = `translateX(${-size * counter}px)`;

next_btn.addEventListener("click", () => {
  if (counter >= carousel_images.length) {
    setTimeout(() => {
      counter = 0;
      dot[counter].classList.add("active");
      carousel_slide.style.transition = "none";
      carousel_slide.style.transform = `translateX(${-size}px)`;
    }, 300);
  } else {
    carousel_slide.style.transition = "all 0.3s ease-in-out";
    counter++;
    for (i = 0; i < dot.length; i++) {
      dot[i].className = dot[i].className.replace(" active", "");
    }
    dot[counter].classList.add("active");
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  }
});

prev_btn.addEventListener("click", () => {
  if (counter < 0) {
    setTimeout(() => {
      counter = carousel_images.length - 1;
      carousel_slide.style.transition = "none";
      carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
    }, 300);
  } else {
    carousel_slide.style.transition = "all 0.3s ease-in-out";
    counter--;
    for (i = 0; i < dot.length; i++) {
      dot[i].className = dot[i].className.replace(" active", "");
    }
    dot[counter].classList.add("active");
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  }
});

, и мне не удалось добавить щелкните событие на точках, чтобы перейти к соответствующему слайду в карусели. Спасибо за чтение и помощь.

Answer 1

После просмотра вашей информации о коде ручки я обнаружил проблему с вашей каруселью при нажатии следующей и предыдущей кнопок. Отредактируйте этот ответ с помощью эффекта перехода от { ссылка }

next_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
    dot.forEach(e=>e.classList.remove( "active" ))
  counter++;
  carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  if (counter >= carousel_images.length) {
    setTimeout(() => {
      counter = 0;
      dot[counter].classList.add("active");
      carousel_slide.style.transition = "none";
      carousel_slide.style.transform = `translateX(${-size}px)`;
    }, 300);
  }else{
      dot[counter].classList.add("active");
  }
    
});

prev_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
    dot.forEach(e=>e.classList.remove( "active" ))
  counter--;
  carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  if (counter < 0) {
    setTimeout(() => {
      counter = carousel_images.length - 1;
      dot[counter].classList.add("active");
      carousel_slide.style.transition = "none";
      carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
    }, 300);
  }else{
      dot[counter].classList.add("active");
  }
});

Просто измените, что прослушиватель событий в два клика будет работать идеально, как мне кажется.

Для нажатия на точку вы можете использовать следующий код

dot.forEach(function(e, i){
    e.addEventListener("click", (elem)=>{        
        dot.forEach(e=>e.classList.remove( "active" ))
       counter=i; dot[counter].classList.add("active");
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
    })
})