bootstrap 3 multi column responsive carousel

问题

I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively. The responsive side of things is perfect, however when the last slide slides the carousel isn't wrapping back to the first slide. It just disappears. Can anyone identify the problem?

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;
}

jsFiddle

[update] Here's an updated jsFiddle that works - thanks to Adrift!

[update2] http://jsfiddle.net/S2rnm/795/ this version responsively shows a different carousel containing 4, 2 or 1 column depending on device size. It requires 3 carousel's each with different visible-x class.

回答1:

The problem is that you have the carousel controls within .carousel-inner - you just need to place them outside of this class:

  </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>

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

回答2:

I try this code working proper

<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://webdesign9.in/css/bootstrap-theme.min.css" />
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_octopus.jpg" alt="Image" class="img-responsive"></a>
                </div>
                    <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/reef_cod.jpg" alt="Image" class="img-responsive"></a>
                </div>
            </div>
            <!--/row-->
        </div>
        <!--/item-->
        <div class="item">
            <div class="row">
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/leather_jacktfish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/ribbonfish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/croaker1.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/shrimp_black_tiger.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg" alt="Image" class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg" alt="Image" class="img-responsive"></a>
                </div>
            </div>
            <!--/row-->
        </div>
        <!--/item-->
    </div>
    <!--/carousel-inner--> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
</div>

来源：https://stackoverflow.com/questions/18785963/bootstrap-3-multi-column-responsive-carousel