Slider mit Bildern: Unterschied zwischen den Versionen

Aus GCMS Hilfe
Wechseln zu: Navigation, Suche
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
Ein Beispiel wie so ein Slider aussehen kann finden Sie [http://www.uni-goettingen.de/en/slider+mit+bildern/582021.html hier].
+
Ein Beispiel, wie ein Slider aussehen kann, finden sie [http://www.uni-goettingen.de/en/slider+mit+bildern/582021.html hier].
  
−
Der dazugehörige Code lautet:
+
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.
 +
  <nowiki><ol class="carousel-indicators hidden-xs"></nowiki>
 +
<nowiki><li data-target="#gcms-slider" data-slide-to="0" class="active"></li></nowiki>
 +
<nowiki><li data-target="#gcms-slider" data-slide-to="1"></li></nowiki>
 +
<nowiki><li data-target="#gcms-slider" data-slide-to="2"></li></nowiki>
 +
<nowiki><li data-target="#gcms-slider" data-slide-to="3"></li></nowiki>
 +
<nowiki></ol></nowiki>
 +
Wenn sie nur 3 Bilder in dem Slider verwenden wollen, müssen sie den Code Abschnitt
 +
 
 +
<code><nowiki><li data-target="#gcms-slider" data-slide-to="3"></li></nowiki></code>
 +
 
 +
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.
 +
 
 +
<code><nowiki><li data-target="#gcms-slider" data-slide-to=4"></li></nowiki></code>
 +
 
 +
In dem nun folgenden Code-Abschnitt werden die verwendeten Bilder eingefügt.
 +
<nowiki><div class="carousel-inner" role="listbox"></nowiki>
 +
<nowiki><div class="item active"></nowiki>
 +
<image id="89749">
 +
<nowiki></div></nowiki>
 +
<nowiki><div class="item"></nowiki>
 +
<image id="89750">
 +
<nowiki></div></nowiki>
 +
<nowiki><div class="item"></nowiki>
 +
<image id="89751">
 +
<nowiki></div></nowiki>
 +
<nowiki><div class="item"></nowiki>
 +
<image id="89752">
 +
<nowiki></div></nowiki>
 +
<nowiki></div></nowiki>
 +
Durch den Code
 +
 
 +
<code><image id="89749"></code>
 +
 
 +
werden die Bilder eingebunden. Die image id ist dabei die ID, die im Mediensystem den hochgeladenen [[Bilder|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.
 +
<nowiki><div class="item"></nowiki>
 +
<image id="89750">
 +
<nowiki></div></nowiki>
 +
 
 +
Den restlichen Abschnitt des Codes lassen sie bitte unverändert oder bearbeiten ihn nur, wenn sie solide Programmier-Kenntnisse auf diesem Gebiet besitzen.
 
  <keinbr/>
 
  <keinbr/>
 
  <nowiki><div class="row carousel-container"></nowiki>
 
  <nowiki><div class="row carousel-container"></nowiki>
Zeile 25: Zeile 68:
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
−
  <a class="left carousel-control" href="#gcms-slider" role="button" data-slide="prev">
+
  <a class="left carousel-control" href="#gcms-slider" role="button" data-slide="prev" style="margin-bottom: 0px;">
−
  <nowiki><span class="fa fa-chevron-left" aria-hidden="true"></span></nowiki>
+
  <nowiki><span class="fas fa-chevron-left" aria-hidden="true"></span></nowiki>
 
  <nowiki><span class="sr-only">Zurück</span></nowiki>
 
  <nowiki><span class="sr-only">Zurück</span></nowiki>
 
  </a>
 
  </a>
−
  <a class="right carousel-control" href="#gcms-slider" role="button" data-slide="next">
+
  <a class="right carousel-control" href="#gcms-slider" role="button" data-slide="next" style="margin-bottom: 0px;">
−
  <nowiki><span class="fa fa-chevron-right" aria-hidden="true"></span></nowiki>
+
  <nowiki><span class="fas fa-chevron-right" aria-hidden="true"></span></nowiki>
 
  <nowiki><span class="sr-only">Vor</span></nowiki>
 
  <nowiki><span class="sr-only">Vor</span></nowiki>
 
  </a>
 
  </a>
 
  <nowiki></div></nowiki>  
 
  <nowiki></div></nowiki>  
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>

Aktuelle Version vom 13. März 2024, 14:34 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 auf 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" style="margin-bottom: 0px;">
			<span class="fas 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" style="margin-bottom: 0px;">
			<span class="fas fa-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Vor</span>
		</a>
	</div> 
</div>
Abgerufen von „http://gcms-hilfe.uni-goettingen.de/index.php?title=Slider_mit_Bildern&oldid=1369“