Question

我试图放一个bootstrap carousal（一次滚动4张图片）进入引导标签。我尝试了很多例子，但没有得到。我正在使用bootstrap 3.0。任何人都可以为此提出一个想法吗？无法在任何地方看到至少一个bootstrap 3.0 carousal

Answer 1

您可以使用标准标记，但在每个.item幻灯片包装器中添加四个图像。

<强> HTML：

<div class="carousel slide" data-ride="carousel" id="carousel4img">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel4img" data-slide-to="0" class="active"></li>
        <li data-target="#carousel4img" data-slide-to="1"></li>
        <li data-target="#carousel4img" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/350/E83E00/fff&amp;text=Image+1">
          <img src="http://placehold.it/350/00ACE7/fff&amp;text=Image+2">
          <img src="http://placehold.it/350/e8117f/fff&amp;text=Image+3">
          <img src="http://placehold.it/350/C7FF0D/fff&amp;text=Image+4">
        </div>
        <div class="item">
          <img src="http://placehold.it/350/FF0000/fff&amp;text=Image+5">
          <img src="http://placehold.it/350/E8950C/fff&amp;text=Image+6">
          <img src="http://placehold.it/350/782AE8/fff&amp;text=Image+7">
          <img src="http://placehold.it/350/393CE8/fff&amp;text=Image+8">
        </div>
        <div class="item">
          <img src="http://placehold.it/350/40083D/fff&amp;text=Image+9">
          <img src="http://placehold.it/350/FF1919/fff&amp;text=Image+10">
          <img src="http://placehold.it/350/00E790/fff&amp;text=Image+11">
          <img src="http://placehold.it/350/FFB500/fff&amp;text=Image+12">
        </div>
    </div><!--/.carousel-inner -->
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel4img" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel4img" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a> 
</div><!--/.carousel -->

<强> CSS：

.item img {
    width:25%;
    float:left;
}

哪里可以获得带有4张图像的bootstrap 3.0轮播？

1 个答案: