The slider is not functioning correctly-CodePudding

I'm making a slider. The fact is that when scrolling through the slider, it starts to throw from the first slide to the last and also in the opposite direction. please help, I will be very grateful to you

<div class="container">
    <div class="slider-image">
        <img src="Lam1.jpg" alt="" class="slider-image__item" width="100%">
    </div>
    <div class="slider-image">
        <img src="Lam2.jpg" alt="" class="slider-image__item" width="100%">
    </div>
    <div class="slider-image">
        <img src="Lam3.jpg" alt="" class="slider-image__item" width="100%">
    </div>
    <div class="slider-image">
        <img src="Lam4.jpg" alt="" class="slider-image__item" width="100%">
    </div>
    <div class="slider-image">
        <img src="Lam5.jpg" alt="" class="slider-image__item" width="100%">
    </div>
    <div class="slider-image">
        <img src="Lam6.jpg" alt="" class="slider-image__item" width="100%">
    </div>

    <i id="prev" class="fa fa-arrow-left" aria-hidden="true"></i>
    <i id="next" class="fa fa-arrow-right" aria-hidden="true"></i>

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


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


const prev = document.querySelector('#prev'),
      next = document.querySelector('#next'),
      slides = document.querySelectorAll('.slider-image'),
      dots = document.querySelectorAll('.dot');
let slideIndex = 1;

showSlides(slideIndex);

function showSlides(n) {
    if (n > slides.length) {
        slideIndex = 1;
    }

    if(n < slides.length) {
        slideIndex = slides.length;
    }

    slides.forEach(item => {
        item.style.display = 'none';
    });

    slides[slideIndex - 1].style.display = 'block';
}

function plusSlides(n) {
    showSlides(slideIndex  = n);
}

prev.addEventListener('click', () => {
    plusSlides(1);
});

next.addEventListener('click', () => {
    plusSlides(-1);
});

});

CodePudding user response：

I think you should do a lot of debug logs to see what values you are getting for slideIndex every time.

You are supposed to reset to 1 as soon as your value is greater than the length of the array. Similarly on hitting previous, you are supposed to go to the other end if your n is less than 1.


function showSlides(n) {
    if (n > slides.length) {
        slideIndex = 1;
    }

    if(n < 1) {
        slideIndex = slides.length;
    }

    slides.forEach(item => {
        item.style.display = 'none';
    });

    slides[slideIndex - 1].style.display = 'block';
}

function plusSlides(n) {
    showSlides(slideIndex  = n);
}

prev.addEventListener('click', () => {
    plusSlides(1);
});

next.addEventListener('click', () => {
    plusSlides(-1);
});
});