Question

我使用自举制作了一个旋转木马，但是当图像发生变化时，它们都很笨重，背景在变化时显示为白色，根本不令人赏心悦目。这是我第一次使用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）从position:relative;移除.mainSlider #main_slider .carousel-inner .item，这将停止幻灯片之间的延迟，因此没有任何空格。

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

此外：

这可能不适用，因为你可能有其他CSS等所有准备处理这个但我更改了内部文本和按钮的应用方式，因此它们在视口更改时保留在幻灯片内。它只是恢复到内置的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>

笨重的Bootstrap旋转木马

1 个答案: