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!

Continuator

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.

Nonna

I knew it would be something that simple.. Thank you! – Continuator

I am facing the same problem and overflow thing is not working for me :( – Unaunabated

Answer 2

You can add this in your css :

.carousel { overflow: hidden; }

and

.item { overflow: hidden: }

Warfield

I knew it would be something that simple.. Thank you! – Continuator

You are amazing Sir! You saved me from asking a potential duplicate question. It's insane how css has these little tricks that I could never figure out on my own. – Pintsize

Answer 3

just add width:100%; to the images

img {
    width: 100%;
}

Ep

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.

Upanishad

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

Perfervid

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

False