18

ブートストラップ カルーセルで遊んでいて、スライドごとに 4 列を応答的に表示しようとしました。レスポンシブな面は完璧ですが、最後のスライドがスライドしたときに、カルーセルが最初のスライドに戻りません。消えるだけです。誰でも問題を特定できますか?

HTML

<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner"> 
    <!-- Slide -->
    <div class="item active">
        <div class="row">
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div class="item">
        <div class="row">
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
                <div class="carousel-caption">This is a caption</div>
            </div>
        </div>
    </div>

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a>
</div>

JS

$('#carousel-example-generic').carousel();

CSS

.carousel.slide img {
    width:100%;
    height:auto;
}

jsフィドル

[更新] これは動作する更新されたjsFiddleです - Adrift のおかげです!

[update2] http://jsfiddle.net/S2rnm/795/このバージョンは、デバイスのサイズに応じて、4、2、または 1 列を含む異なるカルーセルをレスポンシブに表示します。それぞれ異なる visible-x クラスを持つ 3 つのカルーセルが必要です。

4

2 に答える 2

16

問題は、カルーセル コントロールが内部にあることです.carousel-inner。このクラスの外に配置する必要があるだけです。

  </div> <!-- Close the .carousel-inner class before the controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="icon-next"></span>
    </a>

例: http://jsfiddle.net/S2rnm/789/

于 2013-09-13T12:17:27.233 に答える