How I can show my database images in owl carousal slider in Laravel 5.8?

Question

I want to show product multiple images in slide. I'm using owl slider.

How can I show product images in slider. I get images from database.

I have in database one product images and other have product details.

I want to get multiple images from database with product_id and want to show in slider.

this is my code

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

this is my view code

@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

Its answer . i solved my error successfully

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