El slider funciona perfectamente, pilla la id y funciona genial, pero intentando implementar en la página web completa salta un error al intentar deslizar el slider de :
Uncaught TypeError: Cannot read property 'id' of null at HTMLDivElement.sliderMove (slider.html:389)
Lo que me salta es en esta linea del código :let id = active.querySelector('img').id;
Si vuelvo a dar al slider me salta otro error:
Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.sliderMove
Que en el js es: activo.classList.remove('activo');
De forma normal si solo dejo en la web el html del slider funciona, pero probando he quitado el navbar que es de bootstrap y no me salen más esos errores, si lo vuelvo a colocar vuelven a saltar los mismos. Este es el html del navbar:
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- <a class="navbar-brand" href="index.html"><h2>Sixteen <em>Clothing</em></h2></a> -->
<a class="navbar-brand" href="#">
<img src="./img/logov2.png" width="200" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="upload_file.html">Subir foto</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="slider.html">Slider</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
LogOut
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Usuario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Cerrar Usuario</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Y el código js del slider que me ha ayudado y que he modificado un poco es este: let divs = document.querySelectorAll('.item'); let com = document.querySelectorAll('.itemo');
function sliderMove(e) {
let active = document.querySelector('.active');
let activo = document.querySelector('.activo');
active.classList.remove('active');
activo.classList.remove('activo');
let id = active.querySelector('img').id;
let actual = Array.from(divs).indexOf(active);
let actual2 = Array.from(com).indexOf(activo);
if(e.target.closest('div').className == 'left-slide') {
console.log('Ha hecho like en la foto: ' + id);
actual = (actual == 0) ? divs.length - 1 : actual - 1;
actual2 = (actual2 == 0) ? com.length - 1 : actual2 - 1;
} else {
console.log('Ha hecho dislike en la foto: ' + id);
actual = (actual < divs.length - 1) ? actual + 1 : 0;
actual2 = (actual2 < com.length - 1) ? actual2 + 1 : 0;
}
divs[actual].classList.add('active');
com[actual2].classList.add('activo');
}
document.querySelector('.left-slide').addEventListener('click', sliderMove);
document.querySelector('.right-slide').addEventListener('click', sliderMove);