Я создаю веб-сайт электронной коммерции, где я разрешаю пользователю загружать до 3 изображений товара, который пользователь хочет продать, изображения отображаются в карусели и хранятся в моей базе данных.

Я использую цикл foreach php для отображения всех изображений в карусели, проблема в том, что он работает только для первого изображения (обычно отображается), и как только я нажимаю «Далее», все исчезает из других элементов, кроме один я просматриваю.

enter image description here

if($total_row > 0)
{
    foreach( $result as $row ){
        $output .= '
    <div class="box product item">
            <div class="product__img">

        <div class="slideshow-container">
            <div class="mySlides ">
                <img class="product__img" src="images/'.$row["folder"].'/'.$row["image1"].'" style="width:100%">

            </div>
            <div class="mySlides ">
                <img class="product__img" src="images/'.$row["folder"].'/'.$row["image2"].'" style="width:100%">

            </div>
            <div class="mySlides ">
                <img class="product__img" src="images/'.$row["folder"].'/'.$row["image3"].'" style="width:100%">

            </div>


        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

        </div>
            </div>

            <div class="product__details">
                <div class="product__details__title">
                    <h4>'.$row["name"].'</h4>
                </div>

                <div class="product__details__price">
                    <h3 " class="text-danger">'.intval($row["price"]).' دج' .'</h3>
                </div>
            </div>

            <div class="product__contact">
            <hr class="style11">
            <i class="far fa-envelope"></i>
            <input class="product__contact__btn" type="submit"   value="      Contacter vendeur"><br><br>
                    <input class="product__contact__comparateur" type="checkbox" name="comparateur" value="comparateur"> Ajouter au comparateur <br>
            </div>
    </div>
    ';
}

}

И это ГАЗ, который я использую для карусели:

var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n > slides.length) 
  {
    slideIndex = 1
  }  

  if (n < 1) {
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  
}

DB :

enter image description here

Спасибо за помощь.

-1
alioua walid 23 Окт 2018 в 17:08

2 ответа

Лучший ответ

Обратите внимание, что для использования карусели для каждого товара с разными изображениями требуется уникальный идентификатор или класс («mySlides»), поскольку кажется, что все изображения ваших товаров используют один и тот же класс карусели, поэтому нажатие на кнопку «Следующий продукт» влияет на другие продукты. элементы также используют тот же класс для карусели, поэтому попробуйте определить щелчок только по текущему контейнеру элемента, чтобы он не повлиял на другие продукты с тем же классом карусели.

1
Rajender Verma 23 Окт 2018 в 14:31

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

0
Ammar Mehr 23 Окт 2018 в 14:22
52951138