Как изменить слайд, нажав на точку в чистом JavaScript?

Question

Помоги мне!Мне нужно показать слайд при нажатии на точку.Я должен упомянуть, что мне нужно это в чистом JavaScript.Вот код: Слайдер в JavaScript

<!-- Slider -->
<div class="slider">
    <img src="https://istanbulclues.com/wp-content/uploads/2016/07/Istanbul-Blue-Mosque-Overview-690x460.jpg" alt="Istanbul" class="img js-show">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=http%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1600x1000%2Fpublic%2F1513186027%2Fmadrid-spain-EUROPEROUTES1217.jpg%3Fitok%3DcBB6JhNC&w=700&q=85" alt="Madrid" class="img">
    <img src="http://2.bp.blogspot.com/-d20p7uaz2pQ/U1o7H7Dc1FI/AAAAAAAADwg/Pr85OY1B1jo/s1600/capilano-004.jpg" alt="Capilano" class="img">
    <img src="https://positivr.fr/wp-content/uploads/2015/08/recyclage-dechets-san-francisco-1.jpg" alt="San Francisco" class="img">
    <img src="https://www.muskimagazin.rs/image.php/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg?width=600&image=https://www.muskimagazin.rs/chest/gallery/barselona-top-destinacija/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg"  alt="Barselona" class="img">

    <button class="arrow prev"><i class="fas fa-chevron-left"></i></button>
    <button class="arrow next"><i class="fas fa-chevron-right"></i></button>

    <!-- Dots -->
    <ul class="dots">
        <li class="dot current"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        <li class="dot"></li>
    </ul>
</div>

Answer 1

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

// click on dots change slide and dot
for (var i = 0; i < dots.length; i++) {
 (function(index){
    dots[i].onclick = function() {
      if (index !== currentSlide) {
        document.querySelector('.dot.current').classList.remove('current');
        this.classList.add('current');
        document.querySelector('.img.js-show').classList.remove('js-show');
        slides[index].classList.add('js-show');
        currentSlide = index;
      }
   }
 })(i);
}

Надеюсь, это поможет!