How to remove the white background from Bootstrap carousal?

http://stackoverflow.com/questions/37811894/

by Gleb Kemarsky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<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>

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);
 ...

JavaScript

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