Slider mit Bildern: Unterschied zwischen den Versionen

Version vom 18. März 2019, 13:44 Uhr

Ein Beispiel, wie 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 Code im folgenden 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 folgenden Code-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 wie die, in der die Bilder auf der Seite erscheinen werden. Je nach Anzahl der oben ausgewählten Menge an Bildern 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 Programmier-Kenntnisse in diesem 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>