2

さて、これは最近起こっていることですが、その理由はよくわかりません。だから私はブートストラップ カルーセルを使用していますが、これはそれを説明する最良の方法です: 2 つのスライドがあり、ユーザーは 2 番目のスライドにいます。ユーザーが > グリフィコンをクリックして次のスライドに移動すると、カルーセル全体が消えます (なぜならスライドはありません) どうすればこれを修正できますか? ここに私の現在のマークアップがあります:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <div style="margin-left: 2em" class="carousel-indicators">
    &nbsp;&nbsp;
  </div>
  <div class="carousel-inner">
    <div class='item active'>
      <img src='' alt='Updates + Helper rank' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Updates + Helper rank
          </h1>
          <p>
            text here
          </p>
        </div>
      </div>
    </div>
    <div class='item'>
      <img src='' alt='Website Updates &amp; News Prune' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Website Updates &amp; News Prune
          </h1>
          <p>
            text here
          </p>
        </div>
      </div>
    </div><a class="left carousel-control" href="#myCarousel" data-slide="prev"></a> <a class="right carousel-control" href= "#myCarousel" data-slide="next"></a>
  </div>
</div>

ありがとう！

編集：また、スライドを自動的に停止する方法を誰かが知っているかどうか疑問に思っていますか?

4

2 に答える 2

2

.carousel-inner問題は、コンテナの外にあるはずのカルーセル コントロールがコンテナ内にあることです。.containerまた、キャプション内で要素を使用する必要はありません。最後に、カルーセルが自動的に循環しないようにするには、data-interval属性を に設定します"false"。

改訂されたマークアップは次のようになります。

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <div style="margin-left: 2em" class="carousel-indicators">&nbsp;&nbsp;</div>
    <div class="carousel-inner">
        <div class='item active'>
            <img src='http://placehold.it/500x300' alt='Updates + Helper rank' />
            <div class='carousel-caption'>
                 <h1>
            Updates + Helper rank
          </h1>

                <p>text here</p>
            </div>
        </div>
        <div class='item'>
            <img src='http://placehold.it/500x300' alt='Website Updates &amp; News Prune' />
            <div class='carousel-caption'>
                 <h1>Website Updates &amp; News Prune</h1>
                <p>text here</p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>

そして、これが実際のデモです

于 2013-11-01T05:13:52.213 に答える
0

どこで問題が発生したかを正確に特定することはできませんが、HTML マークアップが不適切である可能性が高いです。修正できるかどうかを確認するために、最初から再構築することをお勧めします。ここで、Bootstrap courasoul の完全なコード例を入手できます。最初に例のコードをプラグインしてみて、問題を HTML コードまたはその他のコードに絞り込んでください。

inverval を false に設定すると、自動スライドを停止できます。

$('.carousel').carousel({
  interval: false
})
于 2013-11-01T01:46:12.160 に答える