Défilement des images javascript et php
Posté : 05 déc. 2021, 18:50
Bonjour, après des recherches infructueuses je cherche à faire défiler mes images, et cela par annonce publiée. Le problème c'est qu'elles se défilent uniquement à partir de la première annonce, c'est à dire que l'image de la 1ère annonce va défiler les suivantes pour les annonces qui ne lui correspondent pas.Auriez-vous une solution, s'il vous plait?
Voici le code:
Javascript:
php:
Voici le code:
Javascript:
Code : Tout sélectionner
<script>
const items = document.querySelectorAll('img');
const nbSlide = items.length;
const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;
function slideSuivante(){
items[count].classList.remove('active');
if(count < nbSlide - 1){
count++;
} else {
count = 0;
}
items[count].classList.add('active')
console.log(count);
}
suivant.addEventListener('click', slideSuivante)
function slidePrecedente(){
items[count].classList.remove('active');
if(count > 0){
count--;
} else {
count = nbSlide - 1;
}
items[count].classList.add('active')
// console.log(count);
}
precedent.addEventListener('click', slidePrecedente)
function keyPress(e){
console.log(e);
if(e.keyCode === 37){
slidePrecedente();
} else if(e.keyCode === 39){
slideSuivante();
}
}
document.addEventListener('keydown', keyPress)
</script>
Code : Tout sélectionner
$images = !empty($res['images']) ? $res['images'] : NULL;
if($images){
//boucle sur les images
echo'<div class="container">';
echo ' <div class="slider" >';
foreach( $images as $img ){
echo '<img class ="active"
style="width:90px; height:90px;"
src="'.$img.'">';
}
echo "</div>";
echo ' <div class="cont-btn" >';
echo ' <div class="btn-nav left" > <'; echo "</div>";
echo ' <div class="btn-nav right" > >';echo "</div>";
echo "</div>";
}
echo "</div>";