связывание точек слайдера с количеством изображений

Question

У меня имеется автоматический слайдер с возможностью просматривать определённые слайды при помощи точек.

Проблема заключается в том, что я не могу связать данные точки с количеством изображений в базе данных. Допустим если в базе имеются 3 изображения, то соответственно и точек должно быть три. Логику выполнения данной проблемы я понял, а вот реализацию не совсем. Был бы крайне признателен вам за помощь.

var slideIndex = 0;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}
var timer;
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    clearTimeout(timer);
    timer = setTimeout(showSlides, 5000);
}

.slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
      }

      /* Next & previous buttons */
      .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          background-color: red;
      }

      /* Position the "next button" to the right */
      .next {
          right: 0;
          border-radius: 3px 0 0 3px;
      }

      /* On hover, add a black background color with a little bit see-through */
      .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
      }

      /* Caption text */
      .text {
          color: #f2f2f2;
          font-size: 15px;
          padding: 8px 12px;
          position: absolute;
          bottom: 8px;
          width: 100%;
          text-align: center;
      }

      /* Number text (1/3 etc) */
      .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
      }

      /* The dots/bullets/indicators */
      .dot {
          cursor: pointer;
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
      }

      .active, .dot:hover {
          background-color: #717171;
      }

      /* Fading animation */
      .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
      }

      @-webkit-keyframes fade {
          from {opacity: .4} 
          to {opacity: 1}
      }

      @keyframes fade {
          from {opacity: .4} 
          to {opacity: 1}
      }

      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
          .prev, .next,.text {font-size: 11px}
      }

    <?php include 'KugaFitnessBase.php'; ?>
    <div class="slideshow-container">
<?php $Gallery = $pdo->query('SELECT * FROM gallery LIMIT 4'); // LIMIT 1 || WHERE id_list=3
while ($rowGallery = $Gallery->fetch(PDO::FETCH_ASSOC)) { ?>


    <div class="mySlides fade">
      <img src="../dist/image/<?php print_r($rowGallery[SrcGallery]); ?>" style="width:30%">
  </div>
<?php } ?>

<div>
  <span class="dot" onclick="currentSlide(0)"></span> 
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

</div>

БЛОГ НА HUSL

связывание точек слайдера с количеством изображений

Ответы (0 шт):