web-dev-qa-db-ja.com

bootstrapカルーセルのインターバル時間を変更する方法は？

Webページにbootstrapカルーセルがあります。各スライドの間隔を広げようとしています。デフォルトの5000ミリ秒の遅延は速すぎるため、約10秒必要です。

javascripthtmlhtml5css3twitter-bootstrap
31
Alan

次のように、カルーセルを初期化するときにオプションを使用できます。

// interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});

または、次のようにintervalタグでHTML属性を直接使用できます。

<div class="carousel" data-interval="10000">

後者のアプローチの利点は、JSを作成する必要がないことです-前者の利点は、compute間隔で実行時に変数値で初期化できることです。

79
ochi

また、data-interval属性を使用することもできます。 <div class="carousel" data-interval="10000">

115
Deryck
        You need to set interval in  main div as data-interval tag .
        so it is working fine and you can give different time to different slides.

       <!--main div -->
      <div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
  <!-- Indicators -->
  <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
                             i>
                                            </ol>

  <!-- Wrapper for slides -->
  <div role="listbox" class="carousel-inner">
       <div class="item">
          <a class="carousel-image" href="#">
           <img alt="image" src="image.jpg">
          </a>
        </div>
    </div>
 </div>
5
Ali Umair

これを取り除く最良の方法は、次のようにdata-interval属性を追加または変更することです。

<div data-ride="carousel" class="carousel slide" data-interval="10000" id="myCarousel">

通常はjsのようにmsで指定されるため、1000 = 1s、3000 = 3s ... 10000 = 10sです。

ところで、自動的にスライドしないように0で指定することもできます。たとえば、モバイルで商品画像を表示するときに役立ちます。

<div data-ride="carousel" class="carousel slide" data-interval="0" id="myCarousel">
3
JoelBonetR

carouselクラスのdata-interval属性を使用するだけです。

デフォルト値はdata-interval="3000"、つまり3秒に設定されています。

必要なことは、必要な要件に設定することだけです。

0
Tahir77667