我要在幻灯片中显示产品的多个图像。我正在使用猫头鹰滑块。
如何在滑块中显示产品图像。我从数据库中获取图像。
我在数据库中有一个产品图片,其他则有产品详细信息。
我想使用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 :(得分:0)
它的答案。我成功解决了我的错误
<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>