如何在Laravel 5.8的owl carousal滑块中显示数据库图像？

Question

我想在幻灯片中显示产品的多个图像。我正在使用猫头鹰滑块。

我如何在滑块中显示产品图像。我从数据库中获取图像。

我在数据库中有一个产品图片，其他有产品详细信息。

我想使用product_id从数据库中获取多个图像，并希望在滑块中显示。

这是我的代码

<script type="text/javascript">
        $(document).ready(function() {
            @foreach($products as $product )
            var product = {{$product->id}};
            $("#owl-demo",{{$product->id}}).owlCarousel(
        {   loop:true,
            autoPlay: 3000, //Set AutoPlay to 3 seconds
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
            });
            @endforeach
        });
    </script>

这是我的查看代码

@extends('productsview.main')
@section('content')
@foreach($products as $product )
    <!-- Block2 -->
    <div class="col-sm-6 col-md-4 col-lg-3 p-b-50">
        <div class="block2">
            <div class="block2-img wrap-pic-w of-hidden pos-relative" id="owl-demo-{{$product->id}}">
                @if(!$product->images->isEmpty())
                    @foreach($product->images as $image)
                    <div class="item"><img src="{{url($image->path)}}" alt=""></div>
                    @endforeach
                @endif

                <!-- <div class="block2-overlay trans-0-4">
                    <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
                        <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
                        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
                    </a> -->
                    <!-- <div class="block2-btn-addcart w-size1 trans-0-4"> -->
                        <!-- Button -->

                    <!-- </div> -->
                <!-- </div> -->
            </div>
            <div class="block2-txt p-t-20">
                <button onclick="addToCart({{$product->id}})" type="submit" class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" >
                    Add to Cart
                </button>
                <p>
                    {{$product->name}}
                </p>
                <span class="block2-price m-text6 p-r-5">
                {{$product->price}}
                </span>
            </div>
        </div>
    </div >

@endforeach
@endsection

Answer 1

其答案。我成功解决了我的错误

<script type="text/javascript">
        $(document).ready(function() {
            @foreach($products as $product )
            var product = {{$product->id}};
            $("#owl-demo-{{$product->id}}").owlCarousel(
        {   
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true,
            autoPlay: 3000, 
            });
            @endforeach
        });
    </script>