首页 > 其他 > 详细

bootstrap轮播(carousel)图片竖着显示不能轮播的问题解决办法

时间:2015-07-23 10:43:19      阅读:1532      评论:0      收藏:0      [点我收藏+]

之前总是出现这种问题,图片竖着显示并且不能左右轮播的问题。

技术分享

后来发现出现这样的问题是。

  <!-- 轮播(Carousel)项目 -->
               <div class="carousel-inner" >
                  <div class="item active">
                     <img src="../../../web/images/testcar1.jpg" alt="正面照">
                     <div class="carousel-caption">正面照</div>
                  </div>
                  <div class="item">
                     <img src="../../../web/images/testcar2.jpg" alt="中控照">
                     <div class="carousel-caption">中控照</div>
                  </div>
                  <div class="item">
                     <img src="../../../web/images/testcar3.jpg" alt="后面照">
                     <div class="carousel-caption">后面照</div>
                  </div>
               </div>

必须有一个class是“item active”,如果都是“item”的话就会出现这样的问题。而对于我使用smarty模板的话,就要相信加一些逻辑判断了。

<!-- 轮播(Carousel)项目 -->
               <div class="carousel-inner" style="height:450px">
                {$index=0}
                {foreach $b as $c}
                  {if $index == 0}
                  <div class="item active">
                     <img src="{$c}_big.jpg">
                     <div class="carousel-caption"></div>
                  </div>
                  {else if}
                  <div class="item">
                     <img src="{$c}_big.jpg">
                     <div class="carousel-caption"></div>
                  </div>
                  {/if}
                  {$index=$index+1}
                {/foreach}
               </div>


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

bootstrap轮播(carousel)图片竖着显示不能轮播的问题解决办法

原文:http://blog.csdn.net/zhangxbj/article/details/47017505

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!