Bootstrap Karussell: Bilder aus Div beim Gleiten

Question

Ich habe ein Problem, das ich nicht herausfinden kann. Ich benutze Bootstrap Karussell und alles funktioniert gut, außer für Übergänge: nächste Elemente erscheinen aus meinem Karussell div, wenn der gleitenden Übergang beginnt und vorherige aktive Elemente aus myCarousel div gleiten, wie sie von meinem nächsten Element ersetzt werden.

Hier ist mein HTML-Code:

<div id="myCarousel" class="carousel slide span6"> 
    <div id="carousel-inner"> 
      <div class="active item"> 
       <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
      </div> 
      <div class="item"> 
        <img src="img/charnwood_forest_landscape.jpg" /> 
      </div> 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

Ich bin nur das Karussell Skript:

$(document).ready(function() { 
    $(".carousel").carousel({ 
     interval: 5000, 
     pause: "hover", 
    }); 
}); 

Hier ist ein Link zu einem Beispiel für mein Problem, so dass Sie meinen ganzen Code überprüfen: http://todoapp.nfshost.com/slide

Wer kann sehen, was das Problem ist?

Vielen Dank!

Answer 1

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden"> 
<div id="carousel-inner"> 
     <div class="active item"> 
      <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
     </div> 
     <div class="item"> 
       <img src="img/charnwood_forest_landscape.jpg" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

Hey Freund Überlauf in der myCarousel id versteckt hinzuzufügen.

Answer 2

Sie können dies in Ihrem CSS hinzufügen:

.carousel { overflow: hidden; } 

und

.item { overflow: hidden: } 

Answer 3

nur width:100%; zu den Bildern hinzufügen

img { 
    width: 100%; 
} 

Answer 4

I Kader-Lösung versucht, ‚Überlauf zu setzen: versteckt ', aber aus irgendeinem Grund funktionierte das nur auf großen Bildschirmen. Der Überlauf außerhalb des Div erschien immer noch auf kleineren Bildschirmen.

Letztlich ist hier das Styling ich oben auf der Seite hinzugefügt, dieses Problem zu beheben:

.carousel-inner > .next { 
    display: none; 
} 
.carousel-inner > .prev { 
    display: none; 
} 

Das ankommende Bild hat die .next oder .prev Klasse, um es während des Übergangs hinzugefügt. Durch das Ausblenden dieses Elements wird das Überlaufproblem verhindert.

Es gibt wahrscheinlich eine elegantere Lösung, aber das war schnell, einfach und effektiv.