Bootstrap carosello: immagini fuori div durante lo scorrimento

Question

Ho un problema che non riesco a capire. Sto usando il carosello di bootstrap e tutto funziona bene tranne che per le transizioni: gli oggetti successivi appaiono fuori dal myCarousel div quando inizia la transizione scorrevole e gli elementi attivi precedenti scivolano fuori dal mio sparousel mentre vengono sostituiti dal mio prossimo oggetto.

Ecco il mio codice 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> 

Sono solo utilizzando lo script giostra:

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

Ecco un link ad un esempio del mio problema in modo da poter controllare tutto il mio codice: http://todoapp.nfshost.com/slide

Chi può vedere qual è il problema?

Grazie!

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 amico Aggiungi troppopieno nascosto nel myCarousel id.

Answer 2

È possibile aggiungere questo nel CSS:

.carousel { overflow: hidden; } 

e

.item { overflow: hidden: } 

Answer 3

basta aggiungere width:100%; alle immagini

img { 
    width: 100%; 
} 

Answer 4

ho provato la soluzione di Kader per impostare 'overflow: hidden ', ma per qualche motivo ha funzionato solo su schermi di grandi dimensioni. Il trabocco al di fuori del div è ancora apparso su schermi più piccoli.

In definitiva, qui è lo stile ho aggiunto alla parte superiore della pagina per risolvere questo problema:

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

L'immagine in ingresso ha il .Next o .PREV classe aggiunto ad esso durante la transizione. Nascondendo questo elemento previene il problema dell'overflow.

Probabilmente c'è una soluzione più elegante, ma veloce, facile ed efficace.