Как правильно исправить код слайдера на JS?

Question

[L_B_A]

Написал небольшой слайдер на JavaScript. Подскажите, пожалуйста, как довести его до ума и сделать так, чтобы класс «active» останавливался на первом и последнем элементе и никуда за пределы списка не уходил.
Вот ссылка на CodePen.

Comments

[Daria Motorina]

Попробовала пофиксить, но тоже не получается, проще переписать под себя с нуля) Я только одно не понимаю - в showSlides передается n, но в теле функции нигде не используется - в чем тогда смысл такого аргумента?

Answer 1

[i1yas]

В начале функции нужно проверять, не ушел ли n за пределы.

function showSlides(n) {
    var pos = document.getElementsByClassName("position");
    var isOutOfRange = n > pos.length || n < 1;
    if (isOutOfRange) return;
    ...

Comments

[L_B_A]

Спасибо большое! Еще вопрос, как сделать так, чтобы нельзя было кнопкой стрелки клацать бесконечно в разные стороны?

[i1yas]

L_B_A, я сразу этого не заметил. тут придется немного переделать код:

var slideIndex = 1;
// выносим поиск селектора наверх, это более эффективно, и он понадобится в другой функции
var pos = document.getElementsByClassName("position");
showSlides(slideIndex);

function plusSlides(n) {
    // обрабатывать выход за пределы нужно здесь
    // сначала просто проверяем новый индекс, не вышел за рамки, при этом не изменяем глобальную переменную
    var newIndex = slideIndex + n;
    var isOutOfRange = newIndex > pos.length || newIndex < 1;
    if (isOutOfRange) return;
    // если не ушли из диапазона, то новый индекс перезаписываем в глобальную переменную
    slideIndex = newIndex;
    showSlides(newIndex);
}

function showSlides(n) {
    // здесь поиск селектора и проверку можно убрать
    for (var i = 0; i < pos.length; i++) {
        pos[i].className = pos[i].className.replace(" active", "");
    }
    pos[slideIndex-1].className += " active";
}

Теперь индекс не будет уходить в космос

[L_B_A]

i1yas, спасибо большое! Удачи и успехов Вам :)