Défilement des images avec Javascript

Résolu
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention   -  
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Une question que j'ai laissée pendant longtemps car n'arrivant pas à trouver la solution et voulant avancer dans mon projet, je cherche à faire défiler mes images avec du javascript. Si quelqu'un peut m'aider :)

Mon problème: la première image de la première annonce fait défiler les autresimages des différentes annonces.
Phot du 1er clique droite:


Photo du 2ème clique droite:



Photo du 3ème clique droite:



Voici mon code Javascript: 

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)


Voici mon code php: 

<?php foreach ($anouncement as $anounce) {
  echo '<div class="annoncepubs" >';

  $images = !empty($anounce['images']) ? $anounce['images'] : ['/no_image.png']; // array

  if (!empty($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>"; // fin div slider . 
    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>"; // fin div container
  }
  echo "<span class='category'>" . $anounce['CATEGORIE'] . "</span>";
  echo "<span class='title'>" . $anounce['titre'] . "</span>";
  echo "<span class='price'>" . $anounce['prix'] . "</span>";
  echo "<span class='date'>" . $anounce['created_date'] . "</span>";
  


  echo "</div>"; // fin div annoncepubs 
}
  
?>


Configuration: Windows / Chrome 96.0.4664.110
A voir également:

8 réponses

Réponse 1 / 8
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour
Le problème c'est qu'actuellement tu cibles toutes les images dans ta variable items...
Il faudrait que tu ajoutes un moyen de ne cibler que les images de l'annonce désirée...
En passant par une class par exemple..
0
Réponse 2 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Jordane, merci pour ta réponse.
C'est e que j'ai fait alors, mais le clic ne semble pas marcher en attribuant un id par exemple:

Le code: 
<?php foreach ($anouncement as $anounce) {
  echo '<div class="annoncepubs"  id="annonce-"'.$anounce['id'].'"  >';

//....suite

//pour le bouton:
echo '  <div class="btn-nav left" onclick="slideSuivante('.$anounce['id'].'") > <';




Du côté javascript: 

const nbSlide = items.length;
const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(annonceID){
  let items = document.getElementById("annonce-"+annonceID).querySelectorAll('img');
    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>
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Tu as mis des onclick ... mais tu as laissé la addeventlistener ...
vu que ça rentre en conflit..
0
Réponse 3 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Donc tu veux dire qu'on enlève cette partie là: 
suivant.addEventListener('click', slideSuivante)

Je l'ai fait mais rien a changé.
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Une fois que tu as fait ça, as-tu vider le cache de ton navigateur internet ?
As-tu vérifié, dans la console JavaScript de ton navigateur, si il n'y avait pas des messages d'erreur ou d'information ?
As-tu essayé de placer des console.log dans ton code pour vérifier si tu rentrais bien dedans et éventuellement quel était le contenu de tes variables ? I( faudrait déjà commencer par ça..)

Si malgré tout ça tu ne parviens pas à corriger ton code, pense à nous poster l'intégralité de celui-ci ainsi que la version du code source de ta page générée (c'est-à-dire, le code obtenu à travers le navigateur lorsque la page est affichée)
0
Réponse 4 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Ce que j'obtiens dans la console:


Je pense avoir ajouter des console log:
JS: 
<script>

const nbSlide = items.length;
const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(annonceID){
  let items = document.getElementById("annonce-"+annonceID).querySelectorAll('img');
    items[count].classList.remove('active');

    if(count < nbSlide - 1){
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active')
    console.log(count);
    
}



function slidePrecedente(){
    items[count].classList.remove('active');

    if(count > 0){
        count--;
    } else {
        count = nbSlide - 1;
    }

    items[count].classList.add('active')
    console.log(count);
    
}

function keyPress(e){
    console.log(e);
    
    if(e.keyCode === 37){
        slidePrecedente();
    } else if(e.keyCode === 39){
        slideSuivante();
    }
}
document.addEventListener('keydown', keyPress)

 </script>

 </script>









PHP: 
<?php
?>

<?php foreach ($anouncement as $anounce) {

  $id= $anounce['id'];
  echo '<div class="annoncepubs" id="annonce-"'.$anounce['id'].'"  > ';

  $images = !empty($anounce['images']) ? $anounce['images'] : ['/no_image.png']; // array

  if (!empty($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>"; // fin div slider . 
    echo '<div class="cont-btn" >';
    echo '  <div class="btn-nav left" onclick="slideSuivante('.$anounce['id'].'") > <';
    echo "  </div>";
    echo '  <div class="btn-nav right" > >';
    echo "  </div>";
    echo "</div>";
    echo "</div>"; // fin div container
  }
  echo '<a class="maquette" href="single.php?id='.$id.'"  > '; 
  echo "<span class='category'>" . $anounce['CATEGORIE'] . "</span>";
  echo "<span class='title'>" . $anounce['titre'] . "</span>";
  echo "<span class='price'>" . $anounce['prix'] . "</span>";
  echo "<span class='date'>" . $anounce['created_date'] . "</span>";
  


  echo "</div>  </a>"; // fin div annoncepubs 
}
  
?>
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Je t'ai demandé le code source généré de ta page ....
https://fr.wikihow.com/voir-le-code-source

Et pour les console.log .. il faudrait regarde ce que vaut annonceID...
et puis.. il va falloir déplacer la ligne 3 de ton code js 
const nbSlide = items.length;

APRES l'initialisation de ta variable items ... sinon ça ne marchera pas..
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Pour le code source: 

 


<head>
  <meta charset="utf-8">
  <style>
      /*/photo header*/

      html,
body {
  margin: 0;
  padding: 0;
}
/* ------------------------------- */
/* MENU */
#menu {
  position: relative;
  width: 100%;
  
}
#menu ul,
#menu li,
#menu li a {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
  z-index:1;
}
#menu ul {
  width: 100%;
  background:#FFA500;/*orange*/
  font-weight: bold;
}
#menu ul li a {
  display: block;
  color:#873600;/*dark orange*/
  padding: 20px 30px;
  position: relative;
  text-decoration: none;
  height:100%;
}
/* --------------- */
/* MENU : niveau 1 */
#menu nav > ul > li > a {
 color: white;
}
/* --------------- */
/* MENU : niveau 2 */
#menu ul ul {
  color:white;
  background:#f4d03f;/*jaune-orange*/
}
#menu ul ul li > a {
  padding: 15px 30px;
  font-size: 10px bold;
  color:white;/*dark orange*/
}
 
/* --------------- */
/* HOVER : afficher/masquer les SOUS-MENUS*/
#menu ul li > ul {
  display: none; /*on masque le SOUS-MENU*/
}
#menu ul li:hover > ul {
  display: block; /*on affiche le SOUS-MENU*/
}
#menu nav > ul > li.active > a, /* MENU : niveau 1 ACTIF */
#menu ul li:hover > a {
  color:#21618c;/*bleu*/
  background: silver;
}
#menu nav > ul > li.active > a:before, /* MENU : niveau 1 ACTIF */
#menu nav > ul > li:hover > a:before {
  position:absolute;
  content:'';
  display:block;
  top:0; left:0;
  width:100%;
  height:5px;
  background:#f4d03f;/*jaune-orange*/
}
 
/* ---------- responsive  --------- */
/* DESKTOP : menu horizontal */
@media screen and (min-width: 769px) {
  #menu nav > ul {
    display: -webkit-flex;
    display: flex;
  }
  /*  niveau 1 */
  #menu nav > ul > li {
    -webkit-flex: 1 1 1%; /* astuce : 1% pour même largeur */
    flex: 1 1 1%;
  }
  #menu nav > ul > li > a {
  }
  /*  niveau 2  */
  #menu nav > ul ul {
    position: absolute;
    width: 200%;
  }
}
/* ------------------------------- */
/* PHONE : menu vertical */
@media screen and (max-width: 768px) {
  #menu {
    width: 100%;
    margin:0 auto;
  }
}
/* ------------------------------- */
/* MENU burger */
nav input[type=checkbox],
nav label {
  display:none;
}
@media screen and (max-width: 768px) {
  /* input */
  input#menu-mobile {
    position: absolute;
    /*xxleft: -9999em;*/
    opacity:0; /* invisible */
  }
  label[for="menu-mobile"] {
    display: block;
    text-indent: .25em;
    background: #EEE;
    border: 1px solid #CCC;
    margin: 1px;
    cursor: pointer;
    height:48px;
    line-height:48px;
  }
  label[for="menu-mobile"]:before {
    content: "\2630";  
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    text-align: center;
    text-indent: 0;
    font-size: 1em;
    font-weight: bold;
    color: #069;
  }
  /* on traite la liste menu */
  #menu-mobile:not(:checked) ~ ul {
    display: none;
    position: absolute;
    left: -1px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: inherit;
    background: #FFF;
  }
  #menu-mobile:checked ~[for="menu-mobile"]:before {
    content: "\2716";
  }
}
.col-sm-6{
flex: 0 0 50%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    max-width: 50%;
}

a {
     color: white;
     text-decoration: none;
     outline: none !important;
}


.submit_bt{
  position: absolute;
  right: 20px;
     font-size: 14pt; 
     color: #ffffff;
     background-color: #69c934;
     border: 0px;
     height: 50px;
     padding: 0px 20px;
     margin-top: 30px;
}

.white-color{
  color: white;
}
 .langues{
   color: black;
 }
 .maquette{
   color: black;
 }

.submit_bt a:hover{ color: #000; }

.search_main{ width: 78%; float: right; }

.nav-item{
  position: absolute;
  right: 20px;
  
}
.nav-link{
 color:black;
  
}


/*Bouton*/

/*.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: #FFA500;
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
  background-color: #008000;
}

.styled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.icons{
text-align: right;
vertical-align: 30px;
padding: 0px;
margin-right: 20px
}

.boutons{
text-align: right;
vertical-align: 50px;
padding: 20px;
}*/


      </style>
</head>

<header>
<div id= "containermenu">
<div id= "rowmenu">

<div id="menu">
<nav>
  <label for="menu-mobile" class="menu-mobile">Menu</label>
  <input type="checkbox" id="menu-mobile" role="button">

  <ul><li class='menu'><a href= 'affichage.php?id=1'>Accueil</a><ul></ul></li><li class='menu'><a href= 'affichage.php?id=2'>Immobilier</a><ul><li class='submenu'><a href= 'affichage.php?id=201'>Vente de Maisons </a></li><li class='submenu'><a href= 'affichage.php?id=202'>Location de Maison </a></li><li class='submenu'><a href= 'affichage.php?id=203'>Vente Appartement </a></li><li class='submenu'><a href= 'affichage.php?id=204'>Location Appartement </a></li><li class='submenu'><a href= 'affichage.php?id=205'>Bureau </a></li><li class='submenu'><a href= 'affichage.php?id=206'>Terrain </a></li></ul></li><li class='menu'><a href= 'affichage.php?id=3'>Véhicules</a><ul><li class='submenu'><a href= 'affichage.php?id=301'>Voitures </a></li><li class='submenu'><a href= 'affichage.php?id=302'>Motos </a></li><li class='submenu'><a href= 'affichage.php?id=303'>Pièces et Accessoires pour Véhicules </a></li><li class='submenu'><a href= 'affichage.php?id=304'>Vélos </a></li><li class='submenu'><a href= 'affichage.php?id=305'>Véhicules Professionnels </a></li></ul></li><li class='menu'><a href= 'affichage.php?id=4'>Multimédia</a><ul><li class='submenu'><a href= 'affichage.php?id=401'>Téléphones </a></li><li class='submenu'><a href= 'affichage.php?id=402'>Télévisions </a></li><li class='submenu'><a href= 'affichage.php?id=403'>Ordinateurs Portables </a></li><li class='submenu'><a href= 'affichage.php?id=404'>Accessoires Informatiques </a></li><li class='submenu'><a href= 'affichage.php?id=405'>Ordinateurs de Bureaux </a></li></ul></li><li class='menu'><a href= 'affichage.php?id=5'>Cours</a><ul><li class='submenu'><a href= 'affichage.php?id=501'>Cours Individuels </a></li><li class='submenu'><a href= 'affichage.php?id=502'>Cours Collectifs </a></li></ul></li><li class='menu'><a href= 'affichage.php?id=20'>Contact</a><ul></ul></li></ul>
</nav>  
</div>


  <div class= "boutons">



<div class="col-sm-6 col-lg-3">
					<div class="search_main">
                    <button class="submit_bt"><a href="formannonce.php"><span class="doctor"><i class='fa fa-plus white-color'></i></span> Déposer une annonce</a></button>
				    </div>
				</div>


        <div class="nav-item">
                <a class="nav-link" href="connexion.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Connexion                  </span>
                </a>
        
                <a class="nav-link" href="deconnexion.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Inscription                  </span>
                </a>
</div>


      


<div class ="icons">
<a class= "langues" href="accueil.php?lang=fr"> FR </a>
<a class= "langues" href="accueil.php?lang=en">EN </a>
<a class= "langues" href="accueil.php?lang=es">ES</a>

</div>


</div>







</header>

<html lang="fr">
<head>
  <meta charset="utf-8">
 

  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

<div class="containersearch">
<form action="recherche.php" method="GET" id="search-form">

<div class="search_box">
			<div class="rowsearch">
				<div class="col-sm-3">
					<div class="form-group">
                        <input type="text" class="email_boton" id="searchjs" placeholder=maison,voiture... name="q">
                        <button type="button" class="micro"><i class="fas fa-microphone"></i></button>
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
          <select name="categorie" class="email_boton">

<option value="" disabled selected>Catégorie</option>
	<optgroup label ='Immobilier'> 
		<option value='201'>Vente de Maisons</option>
		<option value='202'>Location de Maison</option>
		<option value='203'>Vente Appartement</option>
		<option value='204'>Location Appartement</option>
		<option value='205'>Bureau</option>
		<option value='206'>Terrain</option>
	</optgroup>	<optgroup label ='Véhicules'> 
		<option value='301'>Voitures</option>
		<option value='302'>Motos</option>
		<option value='303'>Pièces et Accessoires pour Véhicules</option>
		<option value='304'>Vélos</option>
		<option value='305'>Véhicules Professionnels</option>
	</optgroup>	<optgroup label ='Multimédia'> 
		<option value='401'>Téléphones</option>
		<option value='402'>Télévisions</option>
		<option value='403'>Ordinateurs Portables</option>
		<option value='404'>Accessoires Informatiques</option>
		<option value='405'>Ordinateurs de Bureaux</option>
	</optgroup>	<optgroup label ='Cours'> 
		<option value='501'>Cours Individuels</option>
		<option value='502'>Cours Collectifs</option>
	</optgroup></select> 
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">


          <select name="villes" class="email_boton">
   <option value="" disabled selected>Ville</option>
   <option value='1'>Nouakchott</option><option value='2'>Nouadhibou</option><option value='3'>Atar</option><option value='4'>Rosso</option><option value='5'>Zouerate</option><option value='6'>Kaedi</option><option value='7'>Kiffa</option><option value='8'>Adelbagrou</option><option value='9'>Boutilimitt</option><option value='10'>Mal</option><option value='11'>Bareina</option><option value='12'>Gouraye</option><option value='13'>Chinguetti</option><option value='14'>Oualata</option><option value='15'>Tichitt</option><option value='16'>Ouadane</option><option value='17'>Nema</option><option value='18'>Aleg</option><option value='19'>Tidjikdja</option><option value='20'>Koumbi</option><option value='21'>Selibabi</option><option value='22'>Aioun</option><option value='23'>Rkiz</option><option value='24'>Bassikounou</option><option value='25'>Guerou</option><option value='26'>Djigueni</option><option value='27'>Benichab</option><option value='28'>Bababe</option><option value='29'>Tintane</option><option value='30'>Keurmacene</option><option value='31'>Ntékane</option><option value='32'>Mederdra</option>                  
</select>
                    </div>
				</div>
				<div class="col-sm-3">
					<div class="form-group">
          <button class="search_bt">Rechercher</button>
                    </div>
                
   
</div>
</div>
</form>
</div>


<div class="top">

<p>
Toutes les annonces</p>
</div>


<div class="annoncepubs" id="annonce-"3"  > <div class="container"> <div class="slider" ><img class ="active" style="width:90px; height:90px;" src="pictures/moto2.jpg"></div><div class="cont-btn" >  <div class="btn-nav left" onclick="slideSuivante(3") > <  </div>  <div class="btn-nav right" > >  </div></div></div><a class="maquette" href="single.php?id=3"  > <span class='category'>Motos</span><span class='title'>Motos à vendre</span><span class='price'>2145</span><span class='date'>2022-01-01</span></div>  </a><div class="annoncepubs" id="annonce-"4"  > <div class="container"> <div class="slider" ><img class ="active" style="width:90px; height:90px;" src="pictures/velo1.jpg"><img class ="active" style="width:90px; height:90px;" src="pictures/velo2.jpg"></div><div class="cont-btn" >  <div class="btn-nav left" onclick="slideSuivante(4") > <  </div>  <div class="btn-nav right" > >  </div></div></div><a class="maquette" href="single.php?id=4"  > <span class='category'>Vélos</span><span class='title'>vélo à vendre. opportunité!!!</span><span class='price'>0</span><span class='date'>2022-01-01</span></div>  </a><div class="annoncepubs" id="annonce-"2"  > <div class="container"> <div class="slider" ><img class ="active" style="width:90px; height:90px;" src="pictures/ordi.jpg"></div><div class="cont-btn" >  <div class="btn-nav left" onclick="slideSuivante(2") > <  </div>  <div class="btn-nav right" > >  </div></div></div><a class="maquette" href="single.php?id=2"  > <span class='category'>Ordinateurs de Bureaux</span><span class='title'>Vente d'un ordinateur</span><span class='price'>25241</span><span class='date'>2021-12-28</span></div>  </a><div class="annoncepubs" id="annonce-"1"  > <div class="container"> <div class="slider" ><img class ="active" style="width:90px; height:90px;" src="pictures/maison.jpg"></div><div class="cont-btn" >  <div class="btn-nav left" onclick="slideSuivante(1") > <  </div>  <div class="btn-nav right" > >  </div></div></div><a class="maquette" href="single.php?id=1"  > <span class='category'>Vente de Maisons</span><span class='title'>maison à vendre</span><span class='price'>25452</span><span class='date'>2021-12-27</span></div>  </a>

<script>
  //rv
  
  const searchForm = document.querySelector("#search-form");
const searchFormInput = searchForm.querySelector("input"); // <=> document.querySelector("#search-form input");
const info = document.querySelector(".info");

// The speech recognition interface lives on the browser’s window object
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // if none exists -> undefined

if(SpeechRecognition) {
  console.log("Your Browser supports speech Recognition");
  
  const recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.lang = "fr-FR";


  const micBtn = searchForm.querySelector("button");
  const micIcon = micBtn.firstElementChild;

  micBtn.addEventListener("click", micBtnClick);
  function micBtnClick(){
    if(micIcon.classList.contains("fa-microphone")) { 
      recognition.start(); 
    }
    else {
      recognition.stop();
    }
  }

  recognition.addEventListener("start", startSpeechRecognition); // <=> recognition.onstart = function(){...}
  function startSpeechRecognition(){
    micIcon.classList.remove("fa-microphone");
    micIcon.classList.add("fa-microphone-slash");
    searchFormInput.focus();
    console.log("Voice activated, SPEAK");
  }

  recognition.addEventListener("end", endSpeechRecognition); // <=> recognition.onend = function(){...}
  function endSpeechRecognition(){
    micIcon.classList.remove("fa-microphone-slash");
    micIcon.classList.add("fa-microphone");
    searchFormInput.focus();
    console.log("Speech recognition service disconnected");
  }

  recognition.addEventListener("result", resultOfSpeechRecognition); // <=> recognition.onresult = function(event) {...} - Fires when you stop talking
  function resultOfSpeechRecognition(event) {
    const current = event.resultIndex;
    const transcript = event.results[current][0].transcript;
    
    if(transcript.toLowerCase().trim()==="stop recording") {
      recognition.stop();
    }
    else if(!searchFormInput.value) {
      searchFormInput.value = transcript;
    }
    else {
      if(transcript.toLowerCase().trim()==="go") {
        searchForm.submit();
      }
      else if(transcript.toLowerCase().trim()==="reset input") {
        searchFormInput.value = "";
      }
      else {
        searchFormInput.value = transcript;
      }
    }
    // searchFormInput.value = transcript;
    // searchFormInput.focus();
    // setTimeout(() => {
    //   searchForm.submit();
    // }, 500);
  }
  
  info.textContent = 'Voice Commands: "stop recording", "reset input", "go"';
  
}
else {
  console.log("Your Browser does not support speech Recognition");
  info.textContent = "Your Browser does not support Speech Recognition";
}
</script>



<script>

const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(annonceID){
  let items = document.getElementById("annonce-"+annonceID).querySelectorAll('img');
  let nbSlide = items.length;
    items[count].classList.remove('active');

    if(count < nbSlide - 1){
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active')
    console.log(annonceID);
    
}



function slidePrecedente(){
    items[count].classList.remove('active');

    if(count > 0){
        count--;
    } else {
        count = nbSlide - 1;
    }

    items[count].classList.add('active')
    console.log(count);
    
}

function keyPress(e){
    console.log(e);
    
    if(e.keyCode === 37){
        slidePrecedente();
    } else if(e.keyCode === 39){
        slideSuivante();
    }
}
document.addEventListener('keydown', keyPress)

 </script>

 </script>



</body>
<head>
  <meta charset="utf-8">

  <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.container2{
	max-width: 1170px;
	margin:auto;
}
.row2{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color: #696969;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: white;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: white;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	padding:15px;
	display: inline-block;
	height: 50px;
	width: 50px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
    text-align:center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}







      </style>


      </head>

<footer class="footer">
  	 <div class="container2">
  	 	<div class="row2">
  	 		<div class="footer-col">
  	 			<h4>Notre Entreprise</h4>
  	 			<ul>
  	 				<li><a href="#">Qui Sommes-Nous?</a></li>
  	 				<li><a href="#">Nos Services</a></li>
  	 				<li><a href="#">Politique Privé</a></li>
  	
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h4>Aide</h4>
  	 			<ul>
  	 				<li><a href="#">FAQ</a></li>
  	 				<li><a href="#">shipping</a></li>
  	 				
  	 				
  	 				
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h4>Nos Annonces</h4>
  	 			<ul>
  	 				<li><a href="#">Immobilier</a></li>
  	 				<li><a href="#">Véhicules</a></li>
  	 				<li><a href="#">Multimédia</a></li>
					   <li><a href="#">Entreprises</a></li>
					<li><a href="#">Cours</a></li>
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h4>Nous suivre</h4>
  	 			<div class="social-links">
  	 				<a href="#"><i class="fab fa-facebook-f "></i></a>
  	 				<a href="#"><i class="fab fa-twitter"></i></a>
  	 				<a href="#"><i class="fab fa-instagram"></i></a>
  	 				<a href="#"><i class="fab fa-linkedin-in"></i></a>
  	 			</div>
  	 		</div>
  	 	</div>
  	 </div>
  </footer></html>



Et dans ma console j'ai toujours les erreurs suivantes:
accueil.php:482 Uncaught TypeError: Cannot set properties of null (setting 'textContent')
Uncaught SyntaxError: missing ) after argument list
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Oulaaaa...
Tu as des balises HTML, head... Un peu partout dans ton code...... Heu... C'est pas bon tout ça...

Et regarde également au niveau des id de tes annonces.... N'as-tu pas remarqué les guillemets en trop ? 
div class="annoncepubs" id="annonce-"3"  >
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
Je ne vois pas non plus les console.log que je t'avais demandé de mettre ...
0
Réponse 6 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
1-Les balises HTML, Je vais régler ça

2-Erreur corrigée. 
<div class="annoncepubs" id= annonce-"3"  >



3-Pour le console.log, je pense que je l'ai mis: 

const suivant = document.querySelector('.right');
const precedent = document.querySelector('.left');
let count = 0;

function slideSuivante(annonceID){
  let items = document.getElementById("annonce-"+annonceID).querySelectorAll('img');
  let nbSlide = items.length;
    items[count].classList.remove('active');

    if(count < nbSlide - 1){
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active')
    console.log(annonceID);
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Erreur corrigée dis tu ???
Pas vraiment non....
Ça devrait donner ça : 
id="annonce-3" >
0
Réponse 7 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Voilà: 
<div class="annoncepubs" id= "annonce-3"  >

Mais d'où vient l'erreur ? Pourquoi on n'arrive pas à faire changer les images?
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Corrige déjà ton code HTML ça peut influer...
Ajoute les console.log que je t'ai demandé à plusieurs reprises
Essaie de corriger les éventuelles erreurs que tu peux voir dans la console
Et reviens nous voir avec ce nouveau code si jamais tes soucis persistent..
0
Réponse 8 / 8
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Un médecin de l'informatique que tu es !! Tu avais raison.
J'ai corrigé mon code html et j'ai remarqué qu'il y avait des " mal placés dans les boutons nav left et right.
Voici le nouveau code des boutons: 
 echo '<div class="cont-btn" >';
    echo '  <div class="btn-nav left" onclick="slideSuivante('.$anounce['id'].')" > <';
    echo "  </div>";
    echo '  <div class="btn-nav right" onclick="slidePrecedente('.$anounce['id'].')" > >';
    echo "  </div>";
    echo "</div>";
    echo "</div>"; // fin div container


Très bonne année à toi :)
0

Discussions similaires

Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
activer/désactivé touche scroll
GII -
pwei -

9 réponses
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses