intento construir un slider con php, donde los div que genero su id es la id de la foto que se muestra y cuentan con una clase active que va cambiando de div en div para ir mostrando estas imagenes en función de si el usuario le da un left-slid o right-slide. Aquí una muestra :
<div class="slider">
<div class="slider-items">
<?php foreach ($nuevo_array as $row){?>
<div id="<?php echo $row['idPhoto']?>" class="item <?php if($row === end($nuevo_array)) echo "active" ?> ?>">
<img class="ampliar" src="uploads/<?php echo $row['urlPath']?>" />
<div class="caption">
<p id="total_<?php echo $row['idPhoto']?>" style="color: white;"><?php echo "$row[likes]"?></p>
</div>
</div>
<?php } ?>
</div>
<div onclick="like()" ><div class="left-slide" ><i class="fas fa-thumbs-up"></i></div></div>
<div onclick="dislike()"><div class="right-slide" ><i class="fas fa-thumbs-down"></i></div></div>
Y quiero que cada vez que se de click a left o right antes de pasar a la siguiente imagen que va a tener la clase active, guarde la id de la imagen exacta antes de mostrarse la siguiente, lo que pasa es que una vez doy click me agarra la id de la siguiente imagen que aparece y tiene la clase active.
Un ejemplo tengo una imagen en este momento de un gato con id=3, al hacer click sea left o right y mientras pasa a la siguiente imagen pasandole tambien la clase active, guarde la id=3 y haga lo que tenga que hacer, pero mi js cuando hace click me guarda la id de la siguiente imagen pongamos un ejemplo que la siguiente imagen es un caballo con id=10, pues me agarra esa id y no es lo que quiero.
Como a la hora de hacer un foreach o un while, el left o right no pueden recibir la id, porque si no recibirían todas las id de todas las imagenes, no encuentro otra forma que hacerlo por javascript para saber en que momento cual es cual.
Lo que habia intentado con el javascript:
function search_id(){
var elemento = document.getElementsByClassName('active');
var cantidad = elemento.length;
//var array_id = Array();
var encontrado;
for(var i = 0; i < cantidad; i++){
var id = elemento[i].getAttribute('id');
conseguido=id;
}
return encontrado;
}
function like(){
var id = search_id();
console.log("Ha hecho like en la foto: "+id);
like_update(id);
}
function dislike(){
var id = search_id();
console.log("Ha hecho dislike en la foto: "+id);
}
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);
active
, solo hay que ser específico en el elemento que se desea obtener:let active = document.querySelector('.slider-items.active');
Edité la respuesta para aplicar ese cambio.