Bonsoir, j'ai un soucis, j'ai un slider qui contient des images appelées en php, mais le problème, c'est qu'il y a plusieurs slider dans la page (un par voiture) et seul le premier fonctionne. Ma question est, pouvez-vous m'aider à modifier mon code afin que les slider fonctionnent sur chaque div de voiture ? 

aperçu :

Voici le code html :

    <?php 

 include('include/connect_mysql.php');
 $reqA = $base->query('SELECT * FROM porsche');

 ?>
      <div class="titre">
        <h2>Modèles de la gamme</h2>
        <h1>Porsche</h1>
    </div>
    
    <?php while($donnee=$reqA->fetch()) { ?>
    <article class="voiture">
        <div class="first">
            <aside class="img">          <div id="overlay"></div>

                                         <div id="showContainer">

      <div class="imageContainer" id="im_1">

        <img  src=<?= $donnee['photo'];?> id="main">
      </div>

      <div class="imageContainer" id="im_2">
                        <img src=<?= $donnee['photo1'];?>>
      </div>

      <div class="imageContainer" id="im_3">
                        <img  src=<?= $donnee['photo2'];?>>
      </div>
      
      <div class="imageContainer" id="im_4">
                        <img  src=<?= $donnee['photo3'];?>>
      </div>

    </div>
                     </aside>

        </section>
    </article>
    <?php
 }
 ?>

Et le code jquery concerné :

<script type="text/javascript">
  $(document).ready(function() {
 
  $('#next').on('click', function(){
    // Change to the next image
    $('#im_' + currentImage).stop().fadeOut(1);
    increaseImage();
    $('#im_' + currentImage).stop().fadeIn(1);
  }); 

  var currentImage = 1;
  var totalImages = 4;

  function increaseImage() {
    /* Increase currentImage by 1.
    * Resets to 1 if larger than totalImages
    */
    ++currentImage;
    if(currentImage > totalImages) {
      currentImage = 1;
    }
  }
  function decreaseImage() {
    /* Decrease currentImage by 1.
    * Resets to totalImages if smaller than 1
    */
    --currentImage;
    if(currentImage < 1) {
      currentImage = totalImages;
    }
  }
});
    </script>

Je me doute que c'est un soucis de ciblage mais je vois pas comment appeler l'id des images généré par le php

-
Edité par EvilSpartans 14 septembre 2019 à 21:52:27

Personne ?

Bonjour,

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/du-php-dans-du-jquery

Je ferme ce sujet. En cas de désaccord, me contacter par MP.