时间戳

首页 > 解决方案 > 使用 Laravel 5.6 循环产品滑块

php - 使用 Laravel 5.6 循环产品滑块

问题描述

我想获取我的产品并使用滑块循环所有产品。我正在尝试使用 @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>
          <div class="item">
            <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>
          <div class="item">
            <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>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹&lt;/a>
        <a data-slide="next" href="#media" class="right carousel-control">›&lt;/a>
      </div>                          
    </div>
  </div>
</div>

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

我试过代码

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

        @foreach($Product as $Pro)

        @if($loop->first)
          <div class="item active">
        @else
          <div class="item">
        @endif
            <div class="row">

                      <div class="col-md-4">
                        <h4 style=" text-align: center; font-weight: 600 !important;">{{$Pro->product_name}}</h4>
                        <a class="thumbnail" href="#"><img alt="{{$Pro->product_name}}" src="{{asset($Pro->prod_image1)}}"></a>
                        <p style=" text-align: center; font-size: 15px;">{{$Pro->prod_short_description}}</p>
                        <a href="#" class="btn-1">Enquiry Basket</a>
                      </div>

            </div>
          </div>
        @endforeach
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹&lt;/a>
        <a data-slide="next" href="#media" class="right carousel-control">›&lt;/a>
      </div>
    </div>
  </div>
</div>

这是我的控制器功能

public function showHome()
    {
        $arr["Product"] = product::where('prod_flag','1')->get();
        return view('index')->with($arr);
    }

在此处输入图像描述

每一行都有一个产品展示

标签： phplaravel

解决方案

好的，问题是您仍在循环单个product.product::where('prod_flag','1')->get();返回集合，并且您正在循环该集合。所以你一直在循环一行意味着一行内只有一个图像，并且该行包含一个col-md-4.

 <div class="row">

                      <div class="col-md-4">
                        <h4 style=" text-align: center; font-weight: 600 !important;">{{$Pro->product_name}}</h4>
                        <a class="thumbnail" href="#"><img alt="{{$Pro->product_name}}" src="{{asset($Pro->prod_image1)}}"></a>
                        <p style=" text-align: center; font-size: 15px;">{{$Pro->prod_short_description}}</p>
                        <a href="#" class="btn-1">Enquiry Basket</a>
                      </div>

            </div>

所以你要做的就是通过如下的collection chunk() 方法将集合分块成子集合。

$products = product::where('prod_flag','1')->get()->chunk(3);

这将输出如下内容

0 => Illuminate\Database\Eloquent\Collection {#1792 ▼
  #items: array:3 [▶]
}
1 => Illuminate\Database\Eloquent\Collection {#1795 ▼
  #items: array:3 [▶]
}
2 => Illuminate\Database\Eloquent\Collection {#1794 ▶}
3 => Illuminate\Database\Eloquent\Collection {#1793 ▼
  #items: array:3 [▶]

正如您现在看到的，一个集合中有 3 种产品。所以现在你要做的就是循环集合，然后在那个循环中循环数组。像下面的东西

     @foreach($Product as $Pro)

        @if($loop->first)
          <div class="item active">
        @else
          <div class="item">
        @endif
            <div class="row">

@foreach($Pro as $singlePro)
                      <div class="col-md-4">
                        <h4 style=" text-align: center; font-weight: 600 !important;">{{$singlePro->product_name}}</h4>
                        <a class="thumbnail" href="#"><img alt="{{$singlePro->product_name}}" src="{{asset($singlePro->prod_image1)}}"></a>
                        <p style=" text-align: center; font-size: 15px;">{{$Pro->prod_short_description}}</p>
                        <a href="#" class="btn-1">Enquiry Basket</a>
                      </div>
@endforeach
            </div>
          </div>
        @endforeach

推荐阅读