doulin2947 2015-05-26 06:06
浏览 114
已采纳

Bootstrap缩略图滑块加载动态内容

I have a thumbnail slider on index page

<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>

So how do I load dynamic data on this slider (where & how i pleased foreach loop).

Note :

  1. This is a laravel project.if you use blade syntax,then i will more helpful.
  2. li should be looped five times.
  3. if there is 10 products then item class should be looped 2 times.

Data Source : Product::all();

  • 写回答

1条回答 默认 最新

  • dongshi8038 2015-05-27 06:13
    关注
    <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>
    

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集?
  • ¥20 关于#硬件工程#的问题,请各位专家解答!
  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?
  • ¥15 c++头文件不能识别CDialog