Bootstrap carousel: images from div on shift

Question

I have a problem that I cannot understand. I use bootstrap carousel and everything works fine, except for transitions: the following elements come out of the myCarousel div when the floating point transition starts, and the previous active elements go out of the myCarousel div, because they are replaced with my next element.

Here is my 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> 

I use only the carousel script:

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

Here is a link to an example of my problem so you can check all my code: http://todoapp.nfshost.com/slide

Anyone who can understand what the problem is?

Thanks!

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> 

Hello friend adds overflow hidden in id myCarousel.

Answer 2

You can add this to your css:

 .carousel { overflow: hidden; } 

and

 .item { overflow: hidden: } 

Answer 3

just add width:100%; to images

 img { width: 100%; } 

Answer 4

I tried Kader's solution to set "overflow: hidden", but for some reason it only worked on large screens. Overflow outside the div still appeared on smaller screens.

Ultimately, here is the style I added to the top of the page to fix this problem:

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

The incoming image has a .next or .prev class added to it during the transition. By hiding this element, it prevents an overflow problem.

It might have been a more elegant solution, but it was quick, easy, and efficient.