Question

我将Bootstrap Carousel（http://getbootstrap.com/examples/carousel/）集成到了我的'comesoon＆＃39;主页：http://247tutors.net/comingsoon/index.html

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

请注意我的旋转木马的侧面板onHover，底部留下大约相同像素数的间隙。

..不能告诉它错误是由navbar css引起的（虽然我确实在所有其他相关的css文件之后将index上的carousel-style.css拉入了内容（因此，给出carousel-style.css先于class＆amp; div设置），或者可能，错误源于loginDropdown.css（http://247tutors.net/comingsoon/css/loginDropdown.css）..？

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

我的Carousel 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 -->

Answer 1

你必须删除 .carousel-inner＆gt;的绝对定位。 .item＆gt; carousel-style.css 样式表的第11行上的img 类。它应该删除跳过效果！ ;）

Twitter Bootstrap Carousel未对齐每个幻灯片转换

1 个答案: