Я хочу показать несколько изображений продукта на слайде. Я использую ползунок совы.

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

У меня есть в базе данных одно изображение продукта, а у другого есть информация о продукте.

Я хочу получить несколько изображений из базы данных с помощью 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
0
Happy Jutt 8 Окт 2019 в 15:07

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>
0
Happy Jutt 10 Окт 2019 в 10:02