html - 笨重的 Bootstrap 旋转木马

Question

我使用 bootstrap 制作了一个旋转木马，但是当图像发生变化时，它们都很笨重，并且背景在变化时显示为白色，这真的一点都不讨人喜欢。这是我第一次使用 bootstrap 的轮播，所以也许我做错了什么......这是我的 HTML:

<div class="container-fluid">
<div class="row mainSlider">
    <div class="carousel slide" id="main_slider" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#main_slider" data-slide-to="0" class="active"></li>
            <li data-target="#main_slider" data-slide-to="1" class="active"></li>
            <li data-target="#main_slider" data-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/slide.jpg">
                <div class="container">
                    <div class="col-md-6">
                        <h3>Title of the Slide</h3>
                        <p>Content of the Slide</p>
                        <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="item active">
                <img src="img/slide.jpg">
                <div class="container">
                    <div class="col-md-6">
                        <h3>Title of the Slide 2</h3>
                        <p>Content of the Slide 3</p>
                        <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="item active">
                <img src="img/slide.jpg">
                <div class="container">
                    <div class="col-md-6">
                        <h3>Title of the Slide 3</h3>
                        <p>Content of the Slide 3</p>
                        <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我做了一些自定义 CSS 以使其适合我的设计:

.mainSlider {
    height:443px;
}
#main_slider {
    height:100%;
}
.mainSlider #main_slider .carousel-inner{
    height:100%;
    list-style-type:none;
    padding:0;
    margin:0;
}
.mainSlider #main_slider .carousel-inner .item {
    height:100%;
    padding:0;
    margin:0;
    box-sizing:border-box;
    padding-bottom:40px;
    color:#fff;
    position:relative;
}
.mainSlider #main_slider .carousel-inner .item img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
.mainSlider #main_slider .carousel-inner .item h3 {
    margin:90px 0 30px 0;
    font-size:45px;
    font-family:Merriweather;
}
.mainSlider #main_slider .carousel-inner .item p {
    font-size:17px;
}
.mainSlider #main_slider .carousel-inner .item a.viewMore {
    margin:20px 0;
    padding:10px 25px;
    background-color:#eb7022;
    display:inline-block;
    border-radius:4px;
}

这是 a gif它现在的样子。抱歉，如果这真的很愚蠢，我对前端开发还很陌生。谢谢!

编辑 这是一个截屏视频，以防您看不到 gif:http://screencast.com/t/hWtUZcpRD

Answer 1

你有两件事需要改变:

1) 从 .mainSlider #main_slider .carousel-inner .item 中删除 position:relative;，这将停止幻灯片之间的延迟，因此没有任何白色空间。

2) 您应该只将 .active 类应用于您的第一张幻灯片。不是全部。

还有:

这可能不适用，因为你可能有额外的 CSS 等都准备好处理这个，但我改变了你内部文本和按钮的应用方式，所以当视口(viewport)改变时它们保留在幻灯片中。它只是恢复到内置的 carousel-caption 类并根据需要调整内容。

查看工作示例

.mainSlider #main_slider .carousel-inner .item {
  color: #fff;
}
.mainSlider #main_slider .carousel-inner .item h3 {
  font-size: 45px;
  font-family: Merriweather;
}
.mainSlider #main_slider .carousel-inner .item p {
  font-size: 17px;
}
.mainSlider #main_slider .carousel-inner .item a.viewMore {
  margin: 20px 0;
  padding: 10px 25px;
  background-color: #eb7022;
  display: inline-block;
  border-radius: 4px;
}
.mainSlider #main_slider .carousel-inner .item .carousel-caption {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row mainSlider">
    <div class="carousel slide" id="main_slider" data-ride="carousel" data-interval="5000">
      <ol class="carousel-indicators">
        <li data-target="#main_slider" data-slide-to="0" class="active"></li>
        <li data-target="#main_slider" data-slide-to="1" class="active"></li>
        <li data-target="#main_slider" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://placehold.it/2350x1000/000">
          <div class="carousel-caption">
            <h3>Title of the Slide</h3>

            <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>

          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/2350x1000/f00">
          <div class="carousel-caption">
            <h3>Title of the Slide</h3>

            <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>

          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/2350x1000/ff0">
          <div class="carousel-caption">
            <h3>Title of the Slide</h3>

            <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>