title: How to create multiple dynamic image slider ? [using PHP, MySQL & vanilla JS only ! ]
body: <p><br>
  I'm new to PHP and JS programming and need help with my website project.<br>
  In a other question, I had a problem with an image posting system, which is solved:<br><a href="https://stackoverflow.com/questions/51755878/sos-how-to-display-image-albums-in-posts-using-php-and-mysql-only">SOS! How to display image albums in posts? [using PHP and MYSQL only]</a>.<br>
  <br>
  Now I want to modify this posting system with dynamic image sliders. (next Level ^^)<br>
  At the end, it must be possible to <b>scroll down trough the posts</b> and in each post with more then 1 image, it must be possible to <b>slide left &amp; right through the images of this album</b>.<br>
  <br>
  <b>Image Slider</b><br>
  I inspired me by a full screen image slider: <a href="https://codepen.io/bradtraversy/pen/boydaE" rel="nofollow noreferrer">https://codepen.io/bradtraversy/pen/boydaE</a><br>
  and a carousel slider: <a href="https://www.youtube.com/watch?v=KcdBOoK3Pfw" rel="nofollow noreferrer">https://www.youtube.com/watch?v=KcdBOoK3Pfw</a><br>
  which are both vanilla but static (without database).<br>
  <br>
  <br>
  Below you can see my php file, where everything comes together. </p>
  
  <h1>display.php</h1>
  
  <p><br></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;?php
  $db = mysqli_connect("localhost", "root", "", "post_images");    
  
  $result = mysqli_query($db, "SELECT * FROM posts");
  while ($row = mysqli_fetch_array($result)) {
     echo "&lt;div class=\"post_container\"&gt;";
       echo $row['post_title'];
       echo "&lt;div class=\"image_container\"&gt;";
       SELECT img_file, img_title FROM images WHERE post_id = " .$rowx['id_post']);
  
       if(mysqli_num_rows($resultx) &gt; 0) {
          if(mysqli_num_rows($resultx) == 1) {
             echo "&lt;div class=\"post_image_displayer\"&gt;";
               while ($rowx = mysqli_fetch_array($resultx)) {
                 echo "&lt;img src='../folder_image_uploads/".$rowx['img_file']."' &gt;";
                 echo $rowx['img_title'];
               }
             echo "&lt;/div&gt;";
          }
          elseif(mysqli_num_rows($resultx) &gt; 1) {
             echo "&lt;div class=\"post_image_slider\"&gt;";
               include_once 'incl_image_slider.php';
             echo "&lt;/div&gt;";
          }
       }
       echo "&lt;/div&gt;";
     echo "&lt;/div&gt;";
  }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br></p>
  
  <p>This code works perfectly, if there would be only <b>1</b> slider on this page. You see, I used <b>include_once 'incl_image_slider.php';</b> . If I would use only <b>include 'incl_image_slider.php';</b> , the page go crazy ... (only by the image slider). Even if everything has a <b>class</b> and no unique <b>id</b>. <br></p>
  
  <h1>incl_image_slider.php</h1>
  
  <p><br></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="includes/incl_carousel_slider_style.css"&gt;
  &lt;/head&gt;
  
  &lt;div class="carousel-container"&gt;
      &lt;div class="carousel-slide"&gt;
          &lt;?php
          $db = mysqli_connect("localhost", "root", "", "post_images");
          $result = mysqli_query($db, "SELECT * FROM posts");
          $row = mysqli_fetch_array($result);
          $resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id =".$row['id_post']);
  
          $rowz = mysqli_fetch_all($resultx, MYSQLI_ASSOC);
              echo "&lt;img src='folder_img_uploads/".$rowz[0]['img_file']."' &gt;";
              echo "&lt;img src='folder_img_uploads/".$rowz[1]['img_file']."' &gt;";
              echo "&lt;img src='folder_img_uploads/".$rowz[2]['img_file']."' &gt;";
              echo "&lt;img src='folder_img_uploads/".$rowz[3]['img_file']."' &gt;";
              echo "&lt;img src='folder_img_uploads/".$rowz[4]['img_file']."' &gt;";
          ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="prevBtn"&gt;Prev&lt;/button&gt;
  &lt;button class="nextBtn"&gt;Next&lt;/button&gt;
  
  &lt;script src="incl_image_slider_app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><br>
  The problem with this is, I have to know for each post, how many images inside. So this can't be used dynamically with a database, someone have an idea what to change?</p>
  
  <h1>incl_image_slider_app.js</h1>
  
  <p>Partly this is from: <a href="https://codepen.io/bradtraversy/pen/boydaE" rel="nofollow noreferrer">https://codepen.io/bradtraversy/pen/boydaE</a>
  <br></p>
  
  <pre><code>let sliderImages = document.querySelectorAll(".carousel-slide"),
  arrowLeft = document.querySelector(".prevBtn"),
  arrowRight = document.querySelector(".nextBtn"),
  current = 0;
  
  // Clear all images
  function reset()
  {
    for (let i = 0; i &lt; sliderImages.length; i++)
    {
      sliderImages[i].style.display = "none";
    }
   }
   // Init slider
   function startSlide()
   {
     reset();
     sliderImages[0].style.display = "block";
   }
   // Show prev
   function slideLeft()
   {
     reset();
     sliderImages[current - 1].style.display = "block";
     current--;
  }
  // Show next
  function slideRight()
  {
    reset();
    sliderImages[current + 1].style.display = "block";
    current++;
  }
  // Left arrow click
  arrowLeft.addEventListener("click", function()
  {
    if (current === 0)
    {
      current = sliderImages.length;
    }
  slideLeft();
  });
  
  // Right arrow click
  arrowRight.addEventListener("click", function()
  {
    if (current === sliderImages.length - 1)
    {
      current = -1;
    }
  slideRight();
  });
  
  startSlide();
  </code></pre>
  
  <p><br>
  Actually this image slider don't slide, no idea why? But it shows the first image of a post. <b>And it is not possible to bring this multiple times for each post, in my display.php</b>
  <br>
  <br>
  I hope there is someone who can help me.<br>
  Best Regards :)</p>