Bootstrap carousel transition glitch

Question

I have a problem with bootstrap carousel. I added custom controls and I styled them according to design, but when I am clicking next slide the previous image disappears leaving white space in the middle.

I edited the bootstrap.css where I changed the .carousel-caption and I added some custom css for the buttons.

Here are the test page: http://valters.me/b/

And I managed to take a screenshot: http://d.pr/i/yGzY

Answer 1

I tried removing properties from .left and .right, but it didn't solve it for me. The solve I came up with was speeding up the transition. Bootstrap's default is .6s ease-in-out, .5 seemed to do the trick for me. Try adding this to your CSS:

.carousel-inner>.item{
   /*disables white flash*/
   -webkit-transition: -webkit-transform .5s ease-in-out;
   -o-transition: -o-transform .5s ease-in-out;
   transition: transform .5s ease-in-out;
}

Added this as a backup because white is waaaaay more noticable than black:

.carousel-inner{
/*just incase the flash (style above) comes back*/
   background: #000;
}

Hope this helps!

Answer 2

For bootstrap 4 this worked for me. In your .css:

.carousel { overflow: hidden; }
.carousel-item { overflow: hidden; }