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

最新推荐文章于 2024-01-15 19:39:34 发布

进击的鼻孔猫

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量6.4k

点赞数 1

分类专栏： php 文章标签：可配置模板 smarty 轮播 bootstrap

本文链接：https://blog.csdn.net/zhangxbj/article/details/47017505

版权

php 专栏收录该内容

6 篇文章 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>