Я хочу показать продукт несколькими изображениями в слайде. Я использую слайдер совы.
Как мне показать изображения товара в слайдере. Я получаю изображения из базы данных.
У меня есть в базе данных изображения одного продукта, а в других есть сведения о продукте.
Я хочу получить несколько изображений из базы данных с помощью 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