Question

我在索引页面上有一个缩略图滑块

<div class="productslider carousel slide data-slider" id="prod158">
    <div class="carousel-inner">
        <div class="item active">
            <ul>
                <li class="product col-sm-2">
                    <a href="#" alt="">
                        <img src="#" width="160" height="120" alt="loading">
                        <span>Title</span>
                    </a>
                    <span class="text">Price</span>
                </li>
            </ul>                            
        </div>

        <a data-slide="prev" href="#prod158" class="left carousel-control">
            <span class="prev_btn"></span>
        </a>
        <a data-slide="next" href="#prod158" class="right carousel-control"> 
            <span class="next_btn"></span>
        </a>
    </div>

那么如何在这个滑块上加载动态数据（在哪里以及我对foreach循环感到满意）。

注意：

这是一个laravel项目。如果你使用刀片语法，那么我会更有帮助。
li应该循环五次。
如果有10个产品，那么项目类应该循环2次。

数据来源：Product::all();

Answer 1

<div class="productslider carousel slide data-slider" id="prod158">
    <div class="carousel-inner">
       @foreach(array_chunk($products,5) as $row)
        <div class="item active">
                <ul>
                @foreach($row as $product)
                  <li class="product col-sm-2">
                      <a href="#" alt="">
                          <img src="#" width="160" height="120" alt="loading">
                          <span>Title</span>
                       </a>
                     <span class="text">Price</span>
                   </li>
                 @endforeach
                 </ul>                            
               </div>
      @endforeach
     <a data-slide="prev" href="#prod158" class="left carousel-control">
         <span class="prev_btn"></span></a>
     <a data-slide="next" href="#prod158" class="right carousel-control"> 
         <span class="next_btn"></span></a>

Boostrap缩略图滑块加载动态conent

1 个答案: