Почему появляется ошибка "Cannot read property 'dataset' of null"?
У меня есть три блока которые стают слайдерами при определенном расширении экрана, первые два слайдера работают, а вот третий почему-то нет, хоть и делаю всё одинаково...
У меня для таких слайдеров есть функция в которую я передаю название контейнера, и минимальную ширину когда должен активироваться слайдер...
if (document.querySelector('[data-mobile]')) {
function mobileSlider(container, width) {
const startSlider = document.querySelector(container);
let swiperStart;
function mobileSwiper() {
if (window.innerWidth <= width && startSlider.dataset.mobile == 'false') {
swiperStart = new Swiper(startSlider, {
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 50,
pagination: {
el: '.slider-pagination',
clickable: true,
},
speed: 1000,
});
startSlider.dataset.mobile = 'true';
};
if (window.innerWidth > width) {
startSlider.dataset.mobile = 'false';
if (startSlider.classList.contains('swiper-container-initialized')) {
swiperStart.destroy();
};
};
};
mobileSwiper();
window.addEventListener('resize', () => {
mobileSwiper();
});
};
mobileSlider('.exhibition-slider', 900);
mobileSlider('.designer-content', 1060);
mobileSlider('.recall__item-images', 1000);
};
<div class="exhibition-slider" data-mobile="false">
<div class="exhibition-items swiper-wrapper">
<div class="exhibition__item swiper-slide">
<img src="images/content/exhibition-img-1.jpg" alt="exhibition-img-1">
</div>
<div class="exhibition__item swiper-slide">
<img class="lazyload" data-src="images/content/exhibition-img-2.jpg" alt="exhibition-img-1">
</div>
<div class="exhibition__item swiper-slide">
<img class="lazyload" data-src="images/content/exhibition-img-3.jpg" alt="exhibition-img-1">
</div>
</div>
<div class="slider-navigation">
<div class="slider-pagination"></div>
</div>
</div>
<div class="designer-content" data-mobile="false">
<div class="designer-items swiper-wrapper">
<div class="designer__item swiper-slide">
<img class="designer__item-photo lazyload" data-src="images/content/designer-photo-1.jpg" alt="designer-photo">
<h3 class="designer__item-title">
Нина Янченко
</h3>
<blockquote class="designer__item-text">
Основная задача, которую я делаю в студии - я занимаюсь эксплуатацией своего вкуса.
</blockquote>
</div>
<div class="designer__item swiper-slide">
<img class="designer__item-photo lazyload" data-src="images/content/designer-photo-2.jpg" alt="designer-photo">
<h3 class="designer__item-title">
Анастасия Быкова
</h3>
<blockquote class="designer__item-text">
Думайте о содержании, которое вы хотите вложить в создаваемый предмет. Лишь потом придет форма, у вещи будет свой дух.
</blockquote>
</div>
<div class="designer__item swiper-slide">
<img class="designer__item-photo lazyload" data-src="images/content/designer-photo-3.jpg" alt="designer-photo">
<h3 class="designer__item-title">
Монова Юля
</h3>
<blockquote class="designer__item-text">
Понятие стиля и вкуса весьма условно. Дело не в том, что у кого-то вкус лучше, а в том, что именно подходит конкретному человеку.
</blockquote>
</div>
</div>
<div class="slider-navigation">
<div class="slider-pagination"></div>
</div>
</div>
Вот первые два слайдера работают нормально.
<div class="recall__item-images recall-img" data-mobile="false">
<div class="recall-img-wrapper swiper-wrapper">
<div class="recall-img__link swiper-slide">
<img class="recall-img__item" src="images/content/recall-1.jpg" alt="recall-img__item">
</div>
<div class="recall-img__link swiper-slide">
<img class="recall-img__item" src="images/content/recall-2.jpg" alt="recall-img__item">
</div>
<div class="recall-img__link swiper-slide">
<img class="recall-img__item" src="images/content/recall-3.jpg" alt="recall-img__item">
</div>
<div class="recall-img__link swiper-slide">
<img class="recall-img__item" src="images/content/recall-4.jpg" alt="recall-img__item">
</div>
</div>
<div class="slider-navigation">
<div class="slider-pagination"></div>
</div>
</div>
А вот этот слайдер уже почему-то не работает, хоть и сделано всё одинаково...
Uncaught TypeError: Cannot read property 'dataset' of null
Ошибка скорее всего в том, что просто не находит элемент на сайте. Есть странице где первые два слайдера есть, код выполняется и только на третьем слайдере которого нету, выдает ошибку ( что логично )
А вот на другой странице, где нету первых двух слайдеров, код выдает ошибку на первом слайдере, и не пропускает дальше, хоть и третий слайдер есть...
Придумал только так написать, но не думаю что правильно так делать...
if (document.querySelector('.exhibition-slider')) {
mobileSlider('.exhibition-slider', 900);
}
if (document.querySelector('.designer-content')) {
mobileSlider('.designer-content', 1060);
}
if (document.querySelector('.recall__item-images')) {
mobileSlider('.recall__item-images', 1000);
}
Простой
