How to remove the white background from Bootstrap carousal?

Question

I am using Bootstrap v3.0. I changed the transition of carousal slides from horizontal to vertical. But whenever the slide changes there is white background which appears during transition. How to remove it? Here is the Fiddle: https://jsfiddle.net/amanturate/a9gcmg1r/

I want the height of my carousal to be 520px, if I use 100% then it does not fit and i have to scroll to see the whole carousel.

CSS code:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
 height: 520px;
 }

.carousel h1{
 color: white;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
 z-index: 10;
 background-image: linear-gradient(90deg,rgba(57,55,67,0.5),rgba(12,11,17,0.5));
 width: 100%;
 left: 0;
 padding-right: 90px;
}

/* Declare heights because of positioning of img element */
.carousel.vertical .item {
 height: 520px;
 background-color: #777;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.carousel-inner > .item > img {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 min-width: 100%;
 height: 520px;
}

.carousel-caption h1{font-size: 4em;}
.carousel-caption p{font-size: 2em;}

.carousel-control{
 z-index: 15;
}

.carousel-indicators{
 top: 40%;
 left: 100%;
 margin-left: -5%;
 z-index: 20;
 width: auto;
 padding-right: 10px;
}

.carousel-indicators li {
 display: block;
 margin-bottom: 5px;
}

.carousel-indicators .active {
 margin-bottom: 5px;
}


/* vertical carousel*/
.vertical .carousel-inner {
 height: 100%;
}

.carousel.vertical .item {
 -webkit-transition: 0.6s ease-in-out top;
 -moz-transition: 0.6s ease-in-out top;
 -ms-transition: 0.6s ease-in-out top;
 -o-transition: 0.6s ease-in-out top;
 transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
 top: 0;
}

.carousel.vertical .next {
 top: 100%;
}

.carousel.vertical .prev {
 top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
 top: 0%;
}

.carousel.vertical .active.left {
 top: -100%;
}

.carousel.vertical .active.right {
 top: 100%;
}
/*vertical carousel setting ends*/
/* carousel customization ends */

See this answer: http://stackoverflow.com/a/11596944/660694 fiddle: https://jsfiddle.net/mmfansler/2zosm3s6/ — jszobody, Jun 14 '16 at 12:29
The problem is i want to set the height of carousel to 520px and when I set the height the problem occurs again. — Aman Turate, Jun 14 '16 at 12:44

Gleb Kemarsky · Accepted Answer · 2016-06-18T23:15:37.870

Repair Bootstrap vertical carousel

I've simplified your code, fix bugs, improved vertical transition and indicators.

Please check the result: https://jsfiddle.net/glebkema/pok6mf12/

$('.carousel').carousel({
  interval: 3000
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

/* customize */
.carousel,
.carousel-inner .item,
.carousel-inner img {
  height: 520px;
  width: 100%;
}
.carousel .item {
  background-color: #777;
}
.carousel-caption {
  background-image: linear-gradient(90deg, rgba(57, 55, 67, 0.5), rgba(12, 11, 17, 0.5));
  color: white;
  left: 0;
  padding-right: 90px;
  right: 0;
  text-align: right;
  text-transform: uppercase;
}
.carousel-caption h1 { font-size: 4em; }
.carousel-caption p  { font-size: 2em; }

/* vertical indicators */
.carousel-indicators {
  top: 50%;
  left: auto;
  right: 3%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}
.carousel-indicators li {
  display: block;
  height: 12px;
  margin: 9px 1px;
  width: 12px;
}
.carousel-indicators .active {
  height: 14px;
  margin: 8px 0;
  width: 14px;
}

/* vertical transition */
@media all and (transform-3d), (-webkit-transform-3d) {
  .vertical> .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out top;
       -moz-transition:    -moz-transform .6s ease-in-out top;
        -ms-transition:     -mz-transform .6s ease-in-out top;
         -o-transition:      -o-transform .6s ease-in-out top;
            transition:         transform .6s ease-in-out top;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  .vertical> .carousel-inner > .item.next,
  .vertical> .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  .vertical> .carousel-inner > .item.prev,
  .vertical> .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  .vertical> .carousel-inner > .item.next.left,
  .vertical> .carousel-inner > .item.prev.right,
  .vertical> .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active first">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="item second">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="item third">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

score 0 · Answer 2 · answered Jun 14 '16 at 12:28

0

I suppose you can use the following code,

just remove the slide class from carousel div and use like,

<div id="carousel-example-generic" class="carousel vertical" data-ride="carousel">

this will remove the slide animation effect.

answered Jun 14 '16 at 12:28

Jesper Højer

2,942
1
16
26

this would remove animation. Isn't there a way to keep animation also? – Aman Turate Jun 14 '16 at 12:31

score 0 · Answer 3 · answered Jun 14 '16 at 12:34

In your parent div you dont have any background color inside there, To make it look real just add the background color

1.

.carousel {
   background-color: rgba(57,55,67,0.5);
}

or you can do this

just remove the slide class from carousel div and use like,

2.

<div id="carousel-example-generic" class="carousel vertical" data-ride="carousel">

How to remove the white background from Bootstrap carousal?

I want the height of my carousal to be 520px, if I use 100% then it does not fit and i have to scroll to see the whole carousel.

3 Answers3

Repair Bootstrap vertical carousel