从幻灯片过渡到另一张幻灯片期间具有白色背景的引导轮播

Question

我的 Bootstrap Carousel 出现问题。问题是在使用 css 进行转换期间，一张幻灯片和另一张幻灯片之间的布局。在一秒钟内，仅对一小部分背景，将初始 css 样式重新应用于文本和背景。

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

/*carousel*/
.absolute {
  margin-bottom: -46px;
  text-align: center;
  top: 250px;
  position: relative;
  z-index: 100;
  color: white;
  text-transform: uppercase;
  font-size: 3em;
}
.index .item.active {
  height: 450px;
  background-image: url(images/first-back.jpg);
  background-position: 0 5%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(2) {
  background: url(images/ac-bottom.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(3) {
  background: url(images/grills-slider.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(4) {
  background: url(images/store.jpg);
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.index .item:nth-child(4) h1 {
  text-decoration: underline;
}
.item.active h1 {
  font-size: 2em;
  color: white;
  text-align: center;
  position: relative;
  top: 66%;
  text-transform: uppercase;
}

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Is relaxing</h1>
    </div>
    <div class="item">
      <h1>IS PEACE OF MIND</h1>
    </div>
    <div class="item">
      <h1>IS CONFIDENCE</h1>
    </div>
    <div class="item">
      <h1>STARTS HERE</h1>
    </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>

如您所见，我在 html 中使用的是背景图片而不是普通标签。最后一件事，我在轮播外使用h1

<h1 class="absolute">COMFORT</h1>

这将保持固定，用于布局目的。

提前谢谢你

Answer 1

UPD。避免使用.active 类进行装饰。此类提供幻灯片之间的过渡。你可以看到.carousel-inner > .item.active和 .carousel-inner > .active 在bootstrap.css 中定义。

请检查新代码。是你想要达到的吗？

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

.carousel-inner {
  margin-top: 2%;
}

.carousel-inner .item {
  height: 450px;
  background-image: url(//placehold.it/600x200/69c/def/?text=first);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 52%;
  background-color: rgba(51, 51, 51, 0.34);
  background-blend-mode: multiply;
}
.carousel-inner .item:nth-child(2) {
  background-image: url(//placehold.it/600x200/9c6/efd/?text=second);
}
.carousel-inner .item:nth-child(3) {
  background-image: url(//placehold.it/600x200/c69/fde/?text=third);
}
.carousel-inner .item:nth-child(4) {
  background-image: url(//placehold.it/600x200/96c/edf/?text=fourth);
}

.carousel-inner .item h1 {
  color: white;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
}
.carousel-inner .item:nth-child(4) h1 {
  text-decoration: underline;
}

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <h1>Is relaxing</h1>
    </div>
    <div class="item">
      <h1>Is peace of mind</h1>
    </div>
    <div class="item">
      <h1>Is confidence</h1>
    </div>
    <div class="item">
      <h1>Starts here</h1>
    </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>

Answer 2

确实是因为我添加了几行其他代码（css 样式）来设置我代码中的模块（javascript 模块）的样式。这种风格包含两个类（右和左） .right 和 .left ，它们干扰了我的风格（引导轮播将类右和左添加到轮播的每张幻灯片）。问题解决了！

Answer 3

如果过渡期间幻灯片之间出现空白，您可能需要尝试更改 Twitter 引导代码 .carousel-inner { overflow: hidden; } to .carousel-inner { 溢出：可见； }。

Answer 4

需要从隐藏改为可见

.carousel-inner { 
    overflow: visible; 
}

然后添加到body标签

overflow-x: hidden;