0

Bootstrap Carousel ( http://getbootstrap.com/examples/carousel/ ) を「comingsoon」ホームページに統合しました: http://247tutors.net/comingsoon/index.html

ページが完全に読み込まれるまで待つと、自動スライド トランジションが適切に整列されていないことがわかります (Chrome と Firefox で発生する問題)。新しいスライドはそれぞれ一定のレベルで表示され、スライド/画像がカルーセルを覆うようになると、つまり、スライド トランジションの最後に、スライドが ~10px 下がります。

カルーセルのサイド パネル onHover に注目してください。下部にほぼ同じ量のピクセルのギャップが残っています。

..エラーがnavbar cssによって引き起こされたとは言えません（ただし、他のすべての関連するcssファイルの後にcarousel-style.cssがindex.htmlに取り込まれています（したがって、carousel-style.cssを与えるclass & div 設定より優先される)、またはエラーは loginDropdown.css ( http://247tutors.net/comingsoon/css/loginDropdown.css )..?に起因する可能性があります。

完全なソース コードの URL: ビュー ソース: 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 に答える