Bootstrap Carousel-Slider: 4 Bilder auf einmal - zeigt nur ein Bild zur Zeit?

Ich versuche, dies umzusetzen 4 image slider auf meiner website, aber aus irgendeinem Grund nur ein Bild zeigt, zu einem Zeitpunkt.

Kopiere ich eingefügt den code hier:
http://www.bootply.com/94452

Aus irgendeinem Grund nur ein Bild nimmt den reservierten Platz für 4 Bilder. Wenn Sie auf den Pfeil nach rechts, oder warten Sie für das Intervall, es geht um das zweite Bild.

Weiß jemand warum das sein könnte?

Siehe code in den Kommentaren unten:

  • sieht gut zu mir, erarbeiten Ihr Thema?
  • Sie wahrscheinlich nicht einschließlich der bootstrap-css-Datei, weil Sie die gleiche Funktionalität wie ein Karussell der Bilder, aber Sie machten aus dem container des Karussells enthalten die 4 Bilder, die durch Division mit col-xs-3, was ist eine Klasse in der bootstrap-css-Datei.
  • Bootstrap.css: pastebin.com/dsFhGPuA, Bootstrap.min.css: pastebin.com/ZspKhks7, slider.css: pastebin.com/tCSDj95G
  • Ich verstehe nicht, was du meinst mit deinem Kommentar werden Sie auch diese Dateien mit diesen urls (die pastebin sind)? oder du bist einfach nur zeigen Sie mir, was Sie darunter?
  • Der code in diesen Dateien
  • Können Sie erstellen ein Turnschuh für uns? Das wird besser sein

InformationsquelleAutor Ken D | 2015-07-28
  1. 6

    wenn Sie wollen 4 Bilder gleichzeitig zu scrollen, dann wird Ihre Bilder sind nicht richtig verschachtelt.verwenden Sie einfach diesen code sollte es funktionieren.

    <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=2" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=3" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=4" class="img-responsive"></a></div>
      </div>
    </div>
    <div class="item">
      <div class="row">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=5" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=6" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=7" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=8" class="img-responsive"></a></div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
    InformationsquelleAutor Manindra Singh
  2. 0

    können Sie Karussell-Indikatoren in der Ansicht und setzen Sie jedes dia mit einem Bild in aufsteigender Reihenfolge zB.

    </ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:89%" >
    <div class="item active">
        <img src="picture source" alt="First slide">
        <div class="carousel-caption">
           <strong>anything on an image displayed</Strong>
        </div>
    </div>

    hoffe es ist hilfreich...

    • <div id="carousel-Beispiel-generic" class="carousel slide" data-ride="carousel" style="height:auto" background-color:lightsteelblue"> <!-- Indikatoren --> <ol class="carousel-indicators"> <li data-target="#carousel-Beispiel-allgemein" data-slide-to="0" class="active"></li> <li data-target="#carousel-Beispiel-allgemein" data-slide-to="1"></li> <li data-target="#carousel-Beispiel-allgemein" data-slide-to="2"></li> <li data-target="#carousel-Beispiel-allgemein" data-slide-to="3"></li> </ol>
    InformationsquelleAutor thusvir arjun
Schreibe einen Kommentar