1

Использую код для слайдера! Слайдер работает, но на других страница в консоле ошибка (Cannot read property 'classList' of undefined), помогите пожалуйста исправить

код слайдера

var slideIndex = 1;

// Функция увеличивает индекс на 1, показывает следующй слайд
function plusSlide() {
    showSlides(slideIndex += 1);
}

// Функция уменьшяет индекс на 1, показывает предыдущий слайд
function minusSlide() {
    showSlides(slideIndex -= 1);  
}

// Устанавливает текущий слайд
function currentSlide(n) {
    showSlides(slideIndex = n);
}

var element = document.getElementsByClassName('products-slider-wrapper');

    showSlides(slideIndex);
    // Основная функция слайдера 
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("products-slider-wrapper-item");
        var dots = document.getElementsByClassName("products-slider-dots-item");



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

        for (i = 0; i < slides.length; i++) {
            slides[i].classList.add("hidden-slide");

        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" products-slider-dots-active", "");
        }
        slides[slideIndex - 1].classList.remove("hidden-slide");
        dots[slideIndex - 1].className += " products-slider-dots-active";
    }
1
  • на других страницах каких? похоже вы пытаетесь вызвать слайдер там, где его нет
    – ThisMan
    3 июн 2019 в 12:13

2 ответа 2

2

В начало функции добавьте проверку на наличие слайдера

if ($('.products-slider-wrapper-item').length === 0) return;
3
  • а на чисто js как это сделать? Через document.queryselectorAll? 3 июн 2019 в 13:10
  • @Владислав Донченко, Да, заменяете $ на document.queryselectorAll и всё. Хотяя... чтобы оно корректно работало - достаточно ведь наличия только одного класса? Тогда можно использовать if( !document.queryselector('.products-slider-wrapper-item') ) { return; } — символ ! означат отрицание условия. Если на странице есть хотя бы один такой класс, document.queryselector('...') вернет true (отрицание = false). Поэтому если этот класс существует - return не сработает. 3 июн 2019 в 13:58
  • спасибо большое, проблема решена! 3 июн 2019 в 14:09
1

На других страницах нет таких элементов

var slides = document.getElementsByClassName("products-slider-wrapper-item");
var dots = document.getElementsByClassName("products-slider-dots-item");

Поэтому при обращении к несуществующим элементам возникает ошибка

slides[slideIndex - 1].classList.remove("hidden-slide");
dots[slideIndex - 1].className += " products-slider-dots-active";
3
  • а как убрать ошибку, на других страницах и не должно быть тех елементов! 3 июн 2019 в 12:19
  • добавьте проверку на наличие этих элементов. желательно перед выполнением всего что связано со слайдером
    – Skywave
    3 июн 2019 в 12:20
  • а можете пожалуйста сказать как я в jq знаю что можно сделать проверку через .is() а мне нужно на чистом не знаю как сделать? 3 июн 2019 в 12:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.