Laravel (PHP) 和 Owl 轮播问题

Question

我正在尝试使用 Owl 轮播为我的 Laravel 项目创建产品图片库。主图像存储在 "image" 列下的数据库中，在主图像和缩略图库中都显示得很好。目前，缩略图库错误地重复填充了 "image" 列中的图像，而它应该同时填充 "image" 列和位于 "images" 列中的图像.

我写了HTML/CSS/PHP/etc。试图完成前面提到的，但我没有任何运气（同样，我只是不断从缩略图库的 "image" 列中重复获取图像）。这是适用的代码：

<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>

脚本 "I" 写道：

<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>

关于我可能做错了什么有什么建议吗？我已经尝试了故障排除、不同的变体以及 away/coming 返回，但没有成功。

Answer 1

在您的第二个 productImage 函数调用中，您传递了 $product->image，它指的是您的主图像。您只想传递 $image，例如：

productImage($image)

Laravel (PHP) 和 Owl 轮播问题

Laravel (PHP) and Owl Carousel Issues

javascript

php

laravel

owl-carousel

laravel-5