Bootstrap Tipps

Carousel

dieses Beispiel als Videotutorial

 

 

Es folgt der Quelltext

<div id="myCarousel" class="carousel slide">

		<ol class="carousel-indicators">

			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
			<li data-target="#myCarousel" data-slide-to="3"></li>			
			<li data-target="#myCarousel" data-slide-to="4"></li>

</ol>

<!-- Carousel items -->

<div class="carousel-inner">

<div class="active item"><img src="img/finn1.jpg" alt="finn" class="img-responsive center-block" ></div>

<div class="item" ><img src="img/finn2.jpg" alt="finn" class="img-responsive center-block"></div>

<div class="item"><img src="img/finn3.jpg" alt="finn" class="img-responsive center-block"></div>

<div class="item"><img src="img/finn4.jpg" alt="finn" class="img-responsive center-block"></div>

<div class="item"><img src="img/finn5.jpg" alt="finn" class="img-responsive center-block"></div>

</div>

<!-- Carousel nav -->

<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
</a>

</div>

 

Wie immer siehe hierzu auch die Bootstrap Hilfe.

Die ol- data-list-indicators sind die kleinen weißen Punkte, welche anzeigen, welches Bild gerade angezeigt wird.

Innerhalb der items werden die Bilder oder sonstiger content eingefügt. Das item mit Klasse active ist das zuerst angezeigte.

Die beiden Pfeile carousel-control kann man auch mit andern Glyphicons versehen, siehe dazu die Bootstrap Hilfe. Das ist auch die einzige Stelle, wo sich etwas in Bootstrap 3 geändert hat.

Siehe auch das Zentieren der Bilder mittels center-block

 

Autoamtisches Abspielen

Die Option interval erwartet einen Wert in Millisekunden, für den automatischen Bildwechsel.

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

Da man das Carousel jedoch initialisieren muss, kann man diese Option auch gleich in Javascript einfügen.

Man initialisiert ein Carousel mit der id "myCaraousel" folgendermaßen:

<script>
$('#myCarousel').carousel()
</script>

Es folgt die Initialisierung mit dem Automatischen Bildwechsel alle 3 Sekunden. Hierbei allerdings dann ohne data-interval im div Tag.

<script>
$('#myCarousel').carousel({interval:3000})
</script>

Beschriftungen

Man kann den Items Beschriftungen hinzufügen. Füge dazu einfach ein div mit Klasse carousel-caption innerhalb des items ein. Darin kann man dann jedes beliebige Html einfügen.

 
 <div class="item">

		<img src="img/finn2.jpg" alt="finn">

		<div class="carousel-caption text-center">

			<h4>My Dog Finn</h4>

			<p>I had dog and his name was Finn.</p>

		</div> 

</div>