Question

这是我的测试网站http://mint.sbdigi.com/，请注意旋转木马在转换时它之间有空白区域。我不确定为什么会这样。请帮忙。

这是我的简短代码：

HTML

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item text-medium active" style="height: 100%;">
      <h2>Your Fresh New Family Dentist</h2>
      <div class="carousel-overlay"></div><!-- carousel-overlay -->
      <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_02.jpg');" class="fill"></div>
    </div>
      <div class="item text-medium" style="height: 100%;">
        <h2>Bright Smile Package</h2>
        <div class="carousel-overlay"></div><!-- carousel-overlay -->
        <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_03.jpg');" class="fill"></div>
      </div>
      <div class="item text-medium" style="height: 100%;">
        <h2>Refresh Package</h2>
        <div class="carousel-overlay"></div><!-- carousel-overlay -->
        <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_04.jpg');" class="fill"></div>
      </div>
      <div class="item text-medium" style="height: 100%;">
        <h2>New Patient Combo</h2>
        <div class="carousel-overlay"></div><!-- carousel-overlay -->
        <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_05.jpg');" class="fill"></div>
      </div>
</div></header>

CSS

header.carousel {
    height: 550px;
}

#mint-landingcarousel .carousel-indicators {
    z-index: 2;
}

.carousel-indicators {
    bottom: 20px;
}

.carousel-inner {
    overflow: hidden;
    position: relative;
    width: 100%;
}

header.carousel {
    height: 550px;
}
header.carousel .item {
    height: 100%;
}
header.carousel .item.active {
    height: 100%;
}
header.carousel .item h2 {
    font-size: 90px;
    left: 25%;
    position: absolute;
    text-align: center;
    top: 35%;
    width: 50%;
    z-index: 9999999;
}
header.carousel .carousel-inner {
    height: 100%;
}
header.carousel .fill {
    background-position: center center;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: -9999;
}
.carousel-overlay {
    background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 9999;
}

我不确定这段代码是否足够。如果你还想要我的代码，请告诉我。其中一些代码是twitter bootstrap css中的默认代码。

Answer 1

初看起来似乎：

在您的轮播中的活动图像上添加了.active类。 .active类定义轮播中可见/活动项的高度。

当.active不存在时，未设置高度，因此图像不可见。

您应该更改脚本的行为，保持height以便隐藏图像的可见性，否则您将获得白色作为页面背景。

我希望它有所帮助。

Answer 2

我认为您有自定义CSS .left{float:left;}和.right{float:right;}

当旋转木马滑动时，它会向包含div添加左右类。删除CSS中的左右浮动。

OR

添加内联属性

<div class="item text-medium" style="height: 100%; float:none;">

Answer 3

似乎有一个＆＃34;左＆＃34;将类添加到＆＃34;活动＆＃34;通过每次迭代进行分类。我不确定这是否是解决方案，但你可以稍微研究一下。

由于您只使用三个图像，如果您需要，可以将这些图像的背景设置为相同的精确图像，以便通过每次迭代（当它们消失时），仍然在背景中存在相同的图像。然而，这对于页面速度/负载来说效率不高也不好，但它仍然是一种解决方案。

Bootstrap轮播在每张图片之间都有空格

3 个答案: