Heim > Web-Frontend > Bootstrap-Tutorial > So stellen Sie das Bootstrap-Karussell zu langsam ein

So stellen Sie das Bootstrap-Karussell zu langsam ein

(*-*)浩
Freigeben: 2019-07-11 13:13:53
Original
3259 Leute haben es durchsucht

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

So stellen Sie das Bootstrap-Karussell zu langsam ein

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>
Nach dem Login kopieren

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">
Nach dem Login kopieren

Verwenden Sie JavaScript-Anweisungen, um implementieren:

Der auf der offiziellen Website angegebene Code lautet:

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage