bootstrap 3 多列响应式轮播

Posted 2023-02-16

【中文标题】bootstrap 3 多列响应式轮播

【英文标题】：bootstrap 3 multi column responsive carousel

【发布时间】：2013-09-18 02:53:39

【问题描述】：

我一直在玩引导轮播，试图让它在每张幻灯片上显示 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" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <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" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <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" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <div class="carousel-caption">This is a caption</div>
            </div>
            <div class="col-sm-3 col-xs-6"> <img src="http://placehold.it/260x180" />
                <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

[更新] 这是一个更新后的 jsFiddle 有效 - 感谢 Adrift！

[update2] http://jsfiddle.net/S2rnm/795/ 此版本会根据设备大小响应地显示包含 4、2 或 1 列的不同轮播。它需要 3 个轮播，每个轮播都有不同的 visible-x 类。

【参考方案1】：

问题是你在.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/

【讨论】：

我已经用 Adrift 的固定代码和另一个版本更新了我的问题，该版本显示了每个设备大小的不同列数。但是需要 3 个不同的轮播...

【参考方案2】：

我尝试这段代码正常工作

<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"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_octopus.jpg"  class="img-responsive"></a>
                </div>
                    <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_cuttlefish.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/reef_cod.jpg"  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"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/ribbonfish.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/croaker1.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/shrimp_black_tiger.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cuttlefish.jpg"  class="img-responsive"></a>
                </div>
                <div class="col-sm-2 col-xs-6"><a href="#x"><img src="images/whole_cleaned_squid.jpg"  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>