English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Grundtutorials

Bootstrap Plugins

Bootstrap Diaporama (Carousel) Plugin

Das Bootstrap Diaporama (Carousel) Plugin ist eine flexible und responsive Methode, um Schieberegler zu einem Website hinzuzufügen. Außerdem ist der Inhalt ausreichend flexibel und kann Bilder, eingebettete Frames, Videos oder jede andere Art von Inhalt sein, den Sie platzieren möchten.

wenn Sie die Funktionen des Plugins einzeln referenzieren möchten, müssen Sie carousel.jsgezeigt wird. Oder wie Übersicht über Bootstrap Plugins wie im Kapitel bootstrap.js oder die komprimierte Version bootstrap.min.js。

Online-Beispiel

Nachfolgend ist ein einfaches Diaporama, das den allgemeinen Komponenten eines wiederholten Elements anzeigt, die mit dem Bootstrap Diaporama (Carousel) Plugin angezeigt werden. Um ein Diaporama zu erstellen, müssen Sie nur den Code mit diesem Tag hinzufügen. Es ist nicht erforderlich, die data-Eigenschaft zu verwenden, sondern nur eine einfache auf Klasse basierende Entwicklung.

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Bootstrap　Beispiel<　-　Einfaches Diaporama (Carousel) Plugin</<title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</<head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!---　Schlittenfahrt(Indikatoren)　-->
	<ol　class="carousel-indikatoren">
		<li　data-ziel="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="1<></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="2<></li>
	</ol>　　　
	<!---　Schlittenfahrt(Eintrag)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/laufen/bilder/slide1.png"　alt="Erster　Balken">
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide2.png"　alt="Zweiter　Balken">
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide3.png"　alt="Dritter　Balken">
		</div>
	</div>
	<!---　Schlittenfahrt(Navigation)　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
		<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true">/span>
		<span　class="sr-only">Vorheriger</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
		<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true">/span>
		<span　class="sr-only">Nächster</span>
	</a>
</div>　
</body>
</html>
Test it out ‹/›

The results are as shown below:

optionale Titel

Sie können .item im .carousel-caption Element hinzufügen, um der Folie einen Titel zu geben. Es ist nur notwendig, beliebige optionale HTML hier zu platzieren, die automatisch ausgerichtet und formatiert wird. Der folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Bootstrap　Beispiel<　-　Der Titel des Diaporama (Carousel) Plugins</<title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</<head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!---　Schlittenfahrt(Indikatoren)　-->
	<ol　class="carousel-indikatoren">
		<li　data-ziel="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="1<></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="2<></li>
	</ol>　　　
	<!---　Schlittenfahrt(Eintrag)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/laufen/bilder/slide1.png"　alt="Erster　Balken">
			<div　class="carousel-caption">Titel　1</div>
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide2.png"　alt="Zweiter　Balken">
			<div　class="carousel-caption">Titel　2</div>
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide3.png"　alt="Dritter　Balken">
			<div　class="carousel-caption">Titel　3</div>
		</div>
	</div>
	<!---　Schlittenfahrt(Navigation)　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Vorheriger</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Nächster</span>
	</a>
</div>　
</body>
</html>
Test it out ‹/›

The results are as shown below:


Verwendung

  • Durch die data-Eigenschaft：Durch die Verwendung der data-Eigenschaft kann der Standort des Diaporama (Carousel) leicht gesteuert werden.

    • Eigenschaften data-slide akzeptiert Schlüsselwörter prev oder next，um die Position der Folie im Verhältnis zum aktuellen Standort zu ändern.

    • Verwenden data-slide-to Um einen ursprünglichen Schiebereglersindex an den Diaporama zu übergeben,data-slide-zu="2" Die Schieberegler werden zu einem bestimmten Index bewegt, der mit 0 beginnt.

    • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

  • 通过 JavaScript：轮播(Carousel)可通过 JavaScript 手动调用，如下所示：

    $('.carousel').carousel()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称Beschreibung
intervalnumber
默认值：5000		data-interval自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pausestring
默认值："hover"		data-pause鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrapboolean
默认值：true		data-wrap轮播是否连续循环。

方法

下面是一些轮播(Carousel)插件中有用的方法：

方法BeschreibungBeispiel
.carousel(options)初始化轮播为可选的 options 对象，并开始循环项目。
$('#identifier').carousel({
　　　　interval:　2000
)
.carousel('cycle')从左到右循环轮播项目。
$('#identifier').carousel('cycle')
.carousel('pause')停止轮播循环项目。
$('#identifier').carousel('pause')
.carousel(number)循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
$('#identifier').carousel('next')

Online-Beispiel

下面的示例演示了方法的用法：

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Bootstrap　Beispiel<　-　轮播(Carousel)插件方法</<title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</<head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!---　Schlittenfahrt(Indikatoren)　-->
	<ol　class="carousel-indikatoren">
		<li　data-ziel="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="1<></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="2<></li>
	</ol>　　　
	<!---　Schlittenfahrt(Eintrag)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
		<img　src="/laufen/bilder/slide1.png"　alt="Erster　Balken">
		</div>
		<div　class="item">
		<img　src="/laufen/bilder/slide2.png"　alt="Zweiter　Balken">
		</div>
		<div　class="item">
		<img　src="/laufen/bilder/slide3.png"　alt="Dritter　Balken">
		</div>
	</div>
	<!---　Schlittenfahrt(Navigation)　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Vorheriger</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Nächster</span>
	</a>
</div>
<!---　控制按钮　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	Test it out ‹/›

The results are as shown below:


Ereignis

Die folgende Tabelle listet die Ereignisse auf, die im Carousel-Plugin verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

EreignisBeschreibungBeispiel
slide.bs.carouselDieses Ereignis wird sofort ausgelöst, wenn die slide-Beispielmethode aufgerufen wird.
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　Führen Sie einige Aktionen aus...
)
slid.bs.carouselDieses Ereignis wird ausgelöst, wenn der Slideshow-Übergangseffekt des Carousels abgeschlossen ist.
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　Führen Sie einige Aktionen aus...
)

Online-Beispiel

Die folgenden Beispiele zeigen die Verwendung von Ereignissen:

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Bootstrap　Beispiel<　-　Schlittenfahrt(Plugin-Ereignisse)</<title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js>/script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js>/script>
</<head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!---　Schlittenfahrt(Indikatoren)　-->
	<ol　class="carousel-indikatoren">
		<li　data-ziel="#myCarousel"　data-slide-zu="0"　
			class="active"></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="1<></li>
		<li　data-ziel="#myCarousel"　data-slide-zu="2<></li>
	</ol>　　　
	<!---　Schlittenfahrt(Eintrag)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/laufen/bilder/slide1.png"　alt="Erster　Balken">
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide2.png"　alt="Zweiter　Balken">
		</div>
		<div　class="item">
			<img　src="/laufen/bilder/slide3.png"　alt="Dritter　Balken">
		</div>
	</div>
	<!---　Schlittenfahrt(Navigation)　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Vorheriger</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true">/span>
	　　　　<span　class="sr-only">Nächster</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("This event is triggered immediately when the 'slide' example method is called.");
		});
	});
</script>
</body>
</html>
Test it out ‹/›

The results are as shown below:

Bootstrap HTML Coding StandardsBootstrap Collapse Plugin