Karuzela programu Bootstrap: obrazy z elementu div podczas przesuwania

Question

Mam problem, którego nie mogę wymyślić. Używam karuzeli programu startowego i wszystko działa poprawnie, z wyjątkiem przejść: kolejne elementy pojawiają się z elementu myCarousel div, gdy przesuwne przejście rozpoczyna się, a poprzednie aktywne elementy wysuwają się z elementu myCarousel div, ponieważ są zastępowane przez następny element.

Oto mój kod html:

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

jestem tylko przy użyciu skryptu karuzeli:

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

Oto link do przykładu mojego problemu więc można sprawdzić cały mój kod: http://todoapp.nfshost.com/slide

Ktoś, kto może zobaczyć, na czym polega problem?

Dziękujemy!

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 Friend dodać przepełnienie ukryty w id myCarousel.

Answer 2

Możesz dodać ten w css:

.carousel { overflow: hidden; } 

i

.item { overflow: hidden: } 

Answer 3

wystarczy dodać width:100%; do obrazów

img { 
    width: 100%; 
} 

Answer 4

próbowałem rozwiązanie Kaderu aby ustawić „overflow: hidden ", ale z jakiegoś powodu działającego tylko na dużych ekranach. Przelew na zewnątrz div nadal pojawiał się na mniejszych ekranach.

Ostatecznie, oto stylizacji dodałam na górze strony, aby rozwiązać ten problem:

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

Przychodzące obraz ma .next lub .prev klasę dodanego do niego w okresie przejściowym. Ukrywając ten element, zapobiega to problemowi z przepełnieniem.

Istnieje prawdopodobnie bardziej eleganckie rozwiązanie, ale było to szybkie, łatwe i skuteczne.