Aman Turate Aman Turate - 5 months ago 46
CSS Question

How to remove the white background from Bootstrap carousal?

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 */

Answer

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 .item,
.carousel-inner > .item > 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>

Comments