bootstrap 一页多个轮播 结合samrty

bootstrap一页有多个轮播的时候，许多人会遇到只有一个轮播可以用，其他轮播都失效的情况。网上的资料也不多。其实会出现这样的问题，应该是轮播的ID重复了，所以导致bootstrap 一页多个轮播。

我在做项目的时候，结合smarty模板，可扩展的配置轮播，且实现了一个页面又多个轮播的功能。

view层：

//测试数据
    $result = '{
        "service_type": "car",
        "view": {
            "picinfo": {
                "tag_name": "图片信息",
                "data": {
                    "pic_1": {
                        "explain": "车辆1",
                        "type": "text",
                        "options": "",
                        "value": ["../../../web/images/id_card_po","../../../web/images/borrower_contract","../../../web/images/car_dashboard"]
                    },
                    "pic_2": {
                        "explain": "车辆2",
                        "type": "text",
                        "options": "",
                        "value": ["../../../web/images/car_dashboard","../../../web/images/reg_car_info"]
                    }
                }
            }
        }
    }';  

    $pictures = json_decode($result,true);  //变成数组了

    $picdata=array();

    $layoutpic=['picinfo'=>[['pic_1','pic_2']]];
    foreach($layoutpic as $key=>$kuai){
        $datakuai=array();
        $temp=$pictures['view'][$key];

        foreach($kuai as $hang){
            $datahang=array();

            foreach($hang as $lie){

                $a=$temp['data'];

                $datahang[$a[$lie]['explain']]=$a[$lie]['value'];
                // var_dump($datahang);
                 // var_dump($a[$lie]['value']);
            }
            array_push($datakuai,$datahang);
        }
        $picdata[$temp['tag_name']]=$datakuai;
    }

    foreach ($picdata as $key => $value) {

        foreach ($value as $key1 => $value1) {

        }
    }

    $smarty -> assign("mypicture1",$value1);

tpls模板：

 {foreach $mypicture1 as $a=>$b}
    <div style="float:left; display:inline" class="infoblock mgt">
      <h3 style="text-align:center">{$a}</h3>
      <input type="image" src="{$b[0]}_small.jpg" data-toggle="modal" href="#{$a}">
    </div>

    <div class="container">
    <div id="{$a}" class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <!-- 模态框 -->
            <div id="{$a}myCarousel" class="carousel slide">
               <!-- 轮播（Carousel）指标 -->
               <ol class="carousel-indicators">
                {foreach $b as $c}
                  <li data-target="#{$a}myCarousel"></li>
                {/foreach}
               </ol>
               <!-- 轮播（Carousel）项目 -->
               <div class="carousel-inner">
                {foreach $b as $c}
                  <div class="item active">
                     <img src="{$c}_big.jpg">
                     <div class="carousel-caption"></div>
                  </div>
                {/foreach}
               </div>
               <!-- 轮播（Carousel）导航 -->
               <a class="left carousel-control" href="#{$a}myCarousel"
               data-slide="prev">?</a>
               <a class="right carousel-control" href="#{$a}myCarousel"
               data-slide="next">?</a>
            </div>
         </div>
      </div>
    </div>
    {/foreach}

版权声明：本文为博主原创文章，未经博主允许不得转载。