0

我在我的“comingsoon”主页中集成了 Bootstrap 轮播（http://getbootstrap.com/examples/carousel/ ）：http: //247tutors.net/comingsoon/index.html

如果您等待页面完全加载，您将看到自动幻灯片转换未正确对齐（Chrome 和 Firefox 中出现问题）。每张新幻灯片进入一个级别，然后一旦幻灯片/img 覆盖轮播，即在幻灯片过渡结束时，幻灯片下降约 10 像素。

注意我的旋转木马的侧面板在悬停上，在底部留下大约相同数量的像素的间隙。

..不能告诉它错误是由导航栏 css 引起的（虽然，在所有其他相关 css 文件之后，我确实在 index.html 上拉入了 carousel-style.css（因此，给 carousel-style.css类和 div 设置的先例），或者错误可能源于 loginDropdown.css（http://247tutors.net/comingsoon/css/loginDropdown.css）..？

完整源代码网址：view-source：http: //247tutors.net/comingsoon/index.html

我的轮播 css 在这里：http: //247tutors.net/comingsoon/css/carousel-style.css

来自 index.html 的轮播区域片段：

<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">          
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Advanced Subjects</h1>
          <h4 id="textNormal">We specialize in college
          <br />
          courses and above.
          </h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item active -->
    <div class="item">
      <img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal" style="color:#222;">24&#47;7 Availability</h1>
          <h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->
    <div class="item">
      <img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Economical</h1>
          <h4 id="textNormal">Pay by the minute, the
          <br />
          week, or the month.</h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->
    <div class="item">
      <img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Exceptional Tutors</h1>
          <h4 id="textNormal">College graduates from top schools
          <br />
          in a wide range of disciplines.
          </h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->

  </div> <!-- END carousel-inner -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
4

1 回答 1

2

您必须在carousel-style.css样式表的第 11 行删除.carousel-inner > .item > img类的绝对定位。它应该消除跳过效果！;)

于 2014-06-12T02:35:10.503 回答