Slider mit Bildern

Ein Beispiel wie so ein Slider aussehen kann finden Sie hier.

Der dazugehörige Code ist am Ende aufgeführt. Es folgen jetzt einige Erläuterungen zu diesem.

Der hier beschriebene Abschnitt legt die Anzahl der im Slider verwendeten Bilder auf 4 fest.

 		<ol class="carousel-indicators hidden-xs">
			<li data-target="#gcms-slider" data-slide-to="0" class="active"></li>
			<li data-target="#gcms-slider" data-slide-to="1"></li>
			<li data-target="#gcms-slider" data-slide-to="2"></li>
			<li data-target="#gcms-slider" data-slide-to="3"></li>
		</ol>

Wenn Sie nur 3 Bilder in dem Slider verwenden wollen müssen Sie den Code Abschnitt

<li data-target="#gcms-slider" data-slide-to="3"></li>

entfernen. Wenn Sie hingegen ein fünftes Bild einfügen wollen müssen Sie nach der Nummer 3 den Code mit der Nummer 4 einfügen.

<li data-target="#gcms-slider" data-slide-to=4"></li>

In dem nun dargestelltem Abschnitt werden die verwendeten Bilder eingefügt.

		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<image id="89749">
			</div>
			<div class="item">
				<image id="89750">
			</div>
			<div class="item">
				<image id="89751">
			</div>
			<div class="item">
				<image id="89752">
			</div>
		</div>

Durch den Code

<image id="89749">

werden die Bilder eingebunden. Die image id ist dabei die ID die im Mediensystem den hochgeladenen Bildern zugewiesen wurde.

Die Reihenfolge der div Container ist die gleiche Reihenfolge in der die Bilder auf der Seite erscheinen werden. Je nach Anzahl der oben ausgewählten Menge an Bilder müssen Sie die Anzahl der div-Container anpassen. Dies bedeutet, dass Sie den folgenden Abschnitt entweder aus dem gesamten Code entfernen oder hinzufügen müssen.

			<div class="item">
				<image id="89750">
			</div>

Den restlichen Abschnitt des Codes lassen Sie bitte unverändert oder bearbeiten ihn nur wenn Sie solide Kenntnisse in dem Gebiet besitzen.

<keinbr/>
<div class="row carousel-container">
	<div id="gcms-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
		<ol class="carousel-indicators hidden-xs">
			<li data-target="#gcms-slider" data-slide-to="0" class="active"></li>
			<li data-target="#gcms-slider" data-slide-to="1"></li>
			<li data-target="#gcms-slider" data-slide-to="2"></li>
			<li data-target="#gcms-slider" data-slide-to="3"></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<image id="89749">
			</div>
			<div class="item">
				<image id="89750">
			</div>
			<div class="item">
				<image id="89751">
			</div>
			<div class="item">
				<image id="89752">
			</div>
		</div>
		<a class="left carousel-control" href="#gcms-slider" role="button" data-slide="prev">
			<span class="fa fa-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Zurück</span>
		</a>
		<a class="right carousel-control" href="#gcms-slider" role="button" data-slide="next">
			<span class="fa fa-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Vor</span>
		</a>
	</div> 
</div>