Laravel (PHP) 和 Owl Carousel 问题

Question

我正在尝试使用 Owl Carousel 为我的 Laravel 项目创建产品图片库。存储在“图像”列下的数据库中的主图像在主图像和缩略图库中都显示得很好。目前，缩略图库被错误地重复填充了“图像”列中的图像，而应该同时从“图像”列和“图像”列中的图像填充。

我已经编写了 HTML/CSS/PHP/等。试图完成上述任务，但我没有任何运气（同样，我只是不断地从缩略图库的“图像”列中获得图像的重复）。这是适用的代码：

<div class="product-images col-lg-6">
        <div data-slider-id="1" class="owl-carousel items-slider owl-drag">
          <div class="item">
            <img src="{{ productImage($product->image) }}" alt="product" id="currentImage">
          </div>
        </div>

        <div data-slider-id="1" class="owl-thumbs d-flex align-items-center justify-content-center">
          <button class="owl-thumb-item">
            <img src="{{ productImage($product->image) }}" alt="product">
          </button>

          @if ($product->images)
            @foreach (json_decode($product->images, true) as $image)
              <button class="owl-thumb-item">
                <img src="{{ productImage($product->image) }}" alt="product">
              </button>
            @endforeach
          @endif
        </div>
      </div>

脚本“我”写道：

<script>
  (function(){
    const currentImage = document.querySelector('#currentImage');
    const images = document.querySelectorAll('.owl-thumb-item');

    images.forEach((element) => element.addEventListener('click', thumbnailClick));

    function thumbnailClick(e) {
      currentImage.src = this.querySelector('img').src;
    }
  })();
</script>

关于我可能做错了什么有什么建议吗？我尝试了故障排除、不同的变体以及走开/回来，但没有运气。

Answer 1

在您的第二个 productImage 函数调用中，您传递的是 $product->image，它指的是您的主图像。你只想通过$image 喜欢：

productImage($image)