White Space Between Slides Bootstrap Carousel

I am using the bootstrap carousel for a slider on the home page of a website. When the carousel slides automatically there is no problem but as soon as I click the next and prev ar

Solution 1:

set carousel-inner overflow to visible.

.carousel-inner{overflow:visible} 

Solution 2:

Figured out what the problem was. I had custom CSS .left{float:left;} and .right{float:right;}

When the carousel slides it adds classes of left and right to the containing div. Removed the left and right floats in my CSS - problem solved :)

Solution 3:

Bootstrap has by default CSS for carousel which provides 0.6s transition delay. This transition shows white spaces between two slides Inorder to hide those white spaces we need to remove transition by rewriting the css and using !important to make it work.

bootstrap.css

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}

style.css

.carousel-inner>.item {
    -webkit-transition: 0s !important;
    -o-transition: 0s !important;
    transition: 0s !important;
}

copy the above code (style.css) in your external or internal css and hide those white spaces

Solution 4:

I faced up same issue. We need to display previous slide on transition.

.carousel-item-next.carousel-item-left{
  display: block !important;
}

Solution 5:

you can sacrifice some of your width:

.carousel-item {
  width: 99%;
  overflow-x: hidden;
}