it-swarm.com.de

bootstrap 3 mehrspaltiges Karussell

Ich habe mit dem Bootstrap-Karussell gespielt und versucht, 4 Spalten pro Folie anzeigen zu lassen. Die ansprechende Seite der Dinge ist perfekt, aber wenn die letzte Folie verschoben wird, kehrt das Karussell nicht zur ersten Folie zurück. Es verschwindet einfach. Kann jemand das Problem identifizieren?

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] Hier ist ein aktualisiertes jsFiddle das funktioniert - dank Adrift!

[update2] http://jsfiddle.net/S2rnm/795/ Diese Version zeigt abhängig von der Gerätegröße ein anderes Karussell mit 4, 2 oder 1 Spalte. Es benötigt 3 Karussells mit jeweils unterschiedlichen visible-x-Klassen.

17
gpcola

Das Problem ist, dass Sie die Karussell-Steuerelemente in .carousel-inner haben - Sie müssen sie nur außerhalb dieser Klasse platzieren:

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

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

15
Adrift

Ich versuche diesen Code richtig zu arbeiten 

<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>
0
Pankaj Upadhyay