之前总是出现这种问题,图片竖着显示并且不能左右轮播的问题。
后来发现出现这样的问题是。
<!-- 轮播(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>