So stellen Sie das Bootstrap-Karussell zu langsam ein

Bootstrap ist ein sehr einfach zu verwendendes CSS-Framework, das häufig auf verschiedenen Seiten verwendete Layouts und Spezialeffekte integriert.

Wenn Sie das Zeitintervall der Bildrotation ändern möchten, ist es natürlich nicht empfehlenswert, den Quellcode direkt zu ändern. Die Methode ist eigentlich sehr einfach. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Offizieller Code für das BootStrap-Karusselldiagramm

<!--data-ride设置图片切换方式为滑动 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 设置轮播图的数量和顺序-->
  <!--data-target的值应与上面的id值对应 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- 要展示的图片信息 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- 控制图标 -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Zwei Möglichkeiten, das Zeitintervall des Karusselldiagramms zu ändern

Fügen Sie nach data-ride ein Attribut data-interval="millisecond" hinzu, wobei millisecond die Anzahl der Millisekunden ist, die wie folgt festgelegt werden müssen:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

Verwenden Sie JavaScript-Anweisungen, um implementieren:

Der auf der offiziellen Website angegebene Code lautet:

$(function(){
	$('#carousel-example-generic').carousel({interval:1000});
});

Weitere technische Artikel zu Bootstrap finden Sie unter Bootstrap Spalte „Tutorial“ Fangen Sie an zu lernen!

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bootstrap-Karussell zu langsam ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!