javascript - 如何从 Bootstrap 轮播中删除白色背景？

Question

我正在使用 Bootstrap v3.0。我将旋转幻灯片的过渡从水平更改为垂直。但每当幻灯片发生变化时，转换过程中就会出现白色背景。如何去除它？ 这是 fiddle :https://jsfiddle.net/amanturate/a9gcmg1r/

我希望轮播的高度为 520px，如果我使用 100% 那么它不适合，我必须滚动才能看到整个轮播。

CSS 代码:

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

修复 Bootstrap 垂直轮播

我简化了您的代码，修复了错误，改进了垂直过渡和指示器。

请检查结果: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>