使用 Laravel 5.6 循环产品滑块

Question

我想获取我的产品并使用滑块循环所有产品。我正在尝试使用 @foreach 函数获取所有产品，但我没有获得原始滑块的确切视图。请帮助我如何执行此滑块循环。我附上了原来的用户界面并尝试了代码。

原始HTML代码

<div class="carousel slide media-carousel" id="media">

        <div class="carousel-inner">

          <div class="item  active">

            <div class="row">

              <div class="col-md-4">

                <h4 style=" text-align: center; font-weight: 600 !important;">Product Name</h4>

                <a class="thumbnail" href="#"><img alt="" src="./images/cap.jpg"></a>

                <p style=" text-align: center; font-size: 15px;">Product Description</p>

                <a href="#" class="btn-1">Enquiry Basket</a>

              </div>          

              <div class="col-md-4">

                <h4 style=" text-align: center; font-weight: 600 !important;">Product Name</h4>

                <a class="thumbnail" href="#"><img alt="" src="./images/cap.jpg"></a>

                <p style=" text-align: center; font-size: 15px;">Product Description</p>

                <a href="#" class="btn-1">Enquiry Basket</a>

              </div>

              <div class="col-md-4">

                <h4 style=" text-align: center; font-weight: 600 !important;">Product Name</h4>

                <a class="thumbnail" href="#"><img alt="" src="./images/cap.jpg"></a>

                <p style=" text-align: center; font-size: 15px;">Product Description</p>

                <a href="#" class="btn-1">Enquiry Basket</a>

              </div>        

            </div>

          </div>

我的问题每行只能显示 3 个产品。第一个活动行有 3 个图像，其他行各有 3 个产品详细信息。

Answer 1

好吧，问题是您仍在循环单个product.product::where('prod_flag','1')->get();返回集合，并且正在循环该集合。因此，您一直循环一行意味着一行中只有一个图像，并且该行包含一个col-md-4.&nbsp;<div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style=" text-align: center; font-weight: 600 !important;">{{$Pro->product_name}}</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="thumbnail" href="#"><img alt="{{$Pro->product_name}}" src="{{asset($Pro->prod_image1)}}"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style=" text-align: center; font-size: 15px;">{{$Pro->prod_short_description}}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn-1">Enquiry Basket</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>所以你要做的就是通过下面的 collection chunk() 方法将集合分块到子集合中。$products = product::where('prod_flag','1')->get()->chunk(3);这会输出如下所示的内容0 => Illuminate\Database\Eloquent\Collection {#1792 ▼&nbsp; #items: array:3 [▶]}1 => Illuminate\Database\Eloquent\Collection {#1795 ▼&nbsp; #items: array:3 [▶]}2 => Illuminate\Database\Eloquent\Collection {#1794 ▶}3 => Illuminate\Database\Eloquent\Collection {#1793 ▼&nbsp; #items: array:3 [▶]正如您现在所看到的，一个系列中有 3 种产品。所以现在你所要做的就是循环集合，然后在该循环中循环数组。像下面这样的东西&nbsp; &nbsp; &nbsp;@foreach($Product as $Pro)&nbsp; &nbsp; &nbsp; &nbsp; @if($loop->first)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item active">&nbsp; &nbsp; &nbsp; &nbsp; @else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; &nbsp; @endif&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">@foreach($Pro as $singlePro)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style=" text-align: center; font-weight: 600 !important;">{{$singlePro->product_name}}</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="thumbnail" href="#"><img alt="{{$singlePro->product_name}}" src="{{asset($singlePro->prod_image1)}}"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style=" text-align: center; font-size: 15px;">{{$Pro->prod_short_description}}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn-1">Enquiry Basket</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>@endforeach&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; @endforeach