Bootstrap carousel: images out of div when sliding

Question

I have a problem I can't figure out. I'm using bootstrap's carousel and everything works fine except for transitions: next items appear out of myCarousel div when the sliding transition starts and previous active items slide out of myCarousel div as they are being replaced by my next item.

Here's 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'm only using the carousel script:

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

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

Anyone who can see what's the problem ?

Thank you!

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 add overflow hidden in the myCarousel id.

Answer 2

You can add this in your css :

.carousel { overflow: hidden; }

and

.item { overflow: hidden: }

Answer 3

just add width:100%; to the images

img {
    width: 100%;
}

Answer 4

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

Ultimately, here is the styling I added to the top of the page to fix this issue:

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

The incoming image has the .next or .prev class added to it during the transition. By hiding this element it prevent the overflow issue.

There is probably a more elegant solution, but this was quick, easy, and effective.

Answer 5

If overflow:hidden then try fixing the height of carousel-item

#carousel-item {
    height: 40rem;
} 

and,

img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
  }

Answer 6

Ok so none of these solutions was working for me but I finally found that using the max-height on the carousel works to avoid the image to go out of bounds :

.carousel {
    max-height: whatever;
}