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!

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

Solution 2

You can add this in your css :

.carousel { overflow: hidden; }

and

.item { overflow: hidden: }

Solution 3

just add width:100%; to the images

img {
    width: 100%;
}

Comments

[Gerard Clos]

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

[Gerard Clos]

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

[Mazhar Qayyum]

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

[MrJack Mcfreder]

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.