Preset: Content Slider

Neben unserem Slider-Element und den Slidern als Hintergrund für Container kannst du auch Content-Slider-Presets verwenden. Mit diesen kannst du nicht nur Bilder in einem Karussell animieren, sondern auch Texte, Videos, Grafiken, sogar einen Online-Shop und so ziemlich jedes andere Sitejet-Element in einen Slider integrieren. Mit nur ein paar Zeilen Javascript kannst du deinen Slider und sein Verhalten anpassen.

Keine Sorge, dieser Artikel zeigt dir genau, wo du die Content Slider findest, worauf du im Javascript Editor achten solltest und was geändert, hinzugefügt oder entfernt wird, um die von dir gewünschten Ergebnisse zu erzielen.

ABSCHNITT

Content Slider hinzufügen

Javascript Editor durchsuchen

Bestehende Optionen

Neue Variablen für mehr Funktionalität hinzufügen

Beispiel-Code:


Content Slider hinzufügen

Um einen Content Slider hinzuzufügen, folde diesen Schritten:

  1. Gehe zu Inhalt hinzufügen > Preset > Features > Content Slider. 
  2. Ziehe den Slider in deinen Editor (halte [STRG] gedrückt, um ihn in einen Container zu legen). Du kannst auch auf das Preset doppelklicken, um es nach dem aktuell ausgewählten Element einzufügen. 

Sobald du das Preset in den Editor integriert hast, siehst du die folgende Struktur:

Um die Bearbeitung des Slides zu erleichtern, werden die einzelnen Folien untereinander platziert. Die orangefarbenen Ränder sind nur in deinem Editor sichtbar und grenzen die Slides voneinander ab. Die kleinen Zahlen sind aufsteigend sortiert und zeigen die Nummer der jeweiligen Slide an. Es gibt ein paar Einstellung, die durch Klick auf das Puzzle-Symbol, geändert werden können, wie Rand und Größe der Slide. Aber die meisten Einstellungen werden im Javascript Editor angepasst.


Javascript Editor durchsuchen

Um auf alle Optionen für die Content Slider zugreifen zu können, rufst du den Javascript Editor auf. Du findest ihn unter dem Menüpunkt Code oben rechts im CMS oder du drückst [STRG + ALT + J]. Eine einfache Möglichkeit, einen bestimmten Teil des Codes zu finden hast du, wenn du mit [STRG + F] eine Suchleiste öffnest. Gib "Content Slider" ein. Jetzt sollte das Programm automatisch dorthin springen, wo der Code erzeugt wurde (da er in dem Moment integriert wurde, als das Preset in den CMS Editor gezogen wurde, steht er normalerweise am Ende des JS-Codes). Wenn du den Codeblock nicht finden kannst, wurde das Preset für deinen Content Slider vielleicht nicht richtig eingefügt. So sollte es standardmäßig aussehen:


Bestehende Optionen

Werfen wir einen Blick auf das, was bereits Teil des Codeabschnitts ist. Kümmere dich nicht um die ersten paar Zeilen. Wichtig sind die Variablen innerhalb der Funktion, von Autoplay bis Fade. Diese Einstellungen befinden sich in der Regel auch in den normalen Slider-Elementen. Lass uns die Details durchgehen:

  • autoplay: kann auf true oder false gesetzt werden. Hiermit wird festgelegt, ob der Slider automatisch oder nur bei Verwendung der Slider-Navigation gleiten soll.
  • arrows: können auf true oder false gesetzt werden. Dadurch werden die Pfeile, mit denen du durch den Slider navigierst, ein- oder ausgeblendet.
  • prevArrow & nextArrow: Du kannst diese Werte ignorieren. Sie erstellen Schaltflächen in der HTML-Struktur, die zur Navigation verwendet werden können. In den meisten Fällen passt alles, wenn du sie so belässt.
  • speed: eingestellt in Millisekunden. Hier wird die Anzeigedauer für die einzelnen Slides definiert. Je größer die Zahl, desto länger dauert der Übergang von einer Slide zur Nächsten.
  • autoplaySpeed: eingestellt in Millisekunden. Dadurch wird die Pause zwischen den einzelnen Slides festgelegt.
  • dots: kann auf true oder false gesetzt werden. Eine weitere Möglichkeit, durch die Slides zu navigieren, sind Punkte, die zeigen, auf welcher Slide der Nutzer sich gerade befindet. Diese werden standardmäßig unter dem Slider angezeigt.
  • adaptiveHeight: kann auf true oder false gesetzt werden. Wenn sie auf true gesetzt ist, ändert sich die Höhe des Sliders immer entsprechend der Höhe seines Inhalts. Das bedeutet, dass sich die Inhalte im Slider auf und ab bewegen, wenn sie verschiedene Höhen haben. Wenn die Einstellung auf false gesetzt ist, nimmt der Slider automatisch die Höhe der größten Slide an und ändert die Höhe beim Wechseln der Slides nicht.
  • fade: kann auf true oder false gesetzt werden. Dadurch wird bestimmt, ob der Slider von rechts nach links durchläuft oder er die aktuelle Slide langsam ausblendet, während er die Nächste einblendet.

Beachte, dass jede Variable mit ihrem Wert am Ende durch ein Komma getrennt ist, mit Ausnahme der Allerletzten. Beim Hinzufügen oder Entfernen von Variablen ist es wichtig, diese Struktur zu erhalten. Platziere auch keine Variablen außerhalb der Funktion.


Neue Variablen für mehr Funktionalität hinzufügen

Unsere Slider basieren alle auf der Slick Library auf Github. Hier findest du viele Beispiele, um den perfekten Slider zu erstellen. Das kann anfangs etwas einschüchternd wirken. Daher haben wir einige nützliche neue Variablen ausgewählt, die dir gefallen könnten.

  • slidesToShow: Verwende positive natürliche Zahlen größer als 0, um festzulegen, wie viele Slides zeitgleich sichtbar sein sollen. Je nach Content-Menge werden bis sechs Slides empfohlen.
  • slidesToScroll: Verwende positive natürliche Zahlen größer als 0, um festzulegen, wie viele Slides gleichzeitig bewegt werden sollen. Werden zum Beispiel zwei Slides zeitgleich angezeigt und sliedsToScroll auf 2 gesetzt, werden alle Slides auf einmal ersetzt. 

Code:

viewport.promise('api.slick.ready', function() {
		viewport.jQuery('.content-slider-wrap > .inner').slick({
			arrows: true,
			prevArrow: '<button type="button" data-role="none" class="slick-prev" tabindex="0" role="button"></button>',
			nextArrow: '<button type="button" data-role="none" class="slick-next" tabindex="0" role="button"></button>',
			speed: 300,
			dots: true,
			adaptiveHeight: true,
			infinite: true,
			slidesToShow: 2,
			slidesToScroll: 2

		});
	}).requireSlick();
  • centerMode: kann auf true oder false gesetzt werden. Aktiviert die zentrierte Darstellung mit teilweiser Sichtbarkeit der vorherigen/nächsten Slides. Am besten verwendest du das Feature mit ungerade nummerierten slidesToShow (3,5,7,etc.), um optimale Ergebnisse zu erhalten.
  • draggable: kann auf true oder false gesetzt werden. Aktiviert das Ziehen des Sliders mit der Maus auf Desktop-Rechnern. Swipen ist auf mobilen Geräte standardmäßig aktiviert.
  • pauseOnHover: kann auf true oder false gesetzt werden. Autoplay wird beim Hovern der Maus über den Slider angehalten. Dafür trägst du bei Autoplay true ein.
  • lazyLoad: legt fest, ob Bilder nur geladen werden sollen, wenn sie sichtbar sind. Bei ondemand, werden Bilder nur geladen, wenn man sich an der entsprechenden Stelle auf der Website befindet,bei progressive werden sie mit der Initialisierung des Sliders geladen.
  • responsive: bestimmt breakpoints, d.h. Slides, bei denen sich der Slider anders als üblich verhalten soll. Häufiger Anwendungsfall: Es sollen ausnahmsweise eine statt mehrerer Folien gleichzeitig angezeigt werden.

Beispiel-Code:

Dieser Code erzeugt einen Slider, der mit Punkten und Pfeilen navigiert werden kann. Drei Slides werden nebeneinander angezeigt, wobei jeweils eine Slide verschoben wird. Das Karussell beginnt automatisch von vorn, sobald die letzte Slide erreicht ist. Über adaptiveHeight wird die Höhe des Sliders an den Inhalt angepasst. Bei mehreren Folien behält er die Höhe der größten Slide. Die responsive Darstellung wird bei Viewports von 1024px für Tablets und 767px für Smartphones ausgelöst. Bei Tablets lassen wir nur noch zwei Slides zeitgleich erscheinen und wir entfernen die Pfeile, bei Smartphones reduzieren wir auf eine darzustellende Slide und entfernen die Punkte. So sieht das Ergebnis auf allen Viewports aus:

viewport.promise('api.slick.ready', function() {
		viewport.jQuery('.content-slider-wrap > .inner').slick({
			arrows: true,
			prevArrow: '<button type="button" data-role="none" class="slick-prev" tabindex="0" role="button"></button>',
			nextArrow: '<button type="button" data-role="none" class="slick-next" tabindex="0" role="button"></button>',
			speed: 300,
			dots: true,
			adaptiveHeight: true,
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			responsive: [{
					breakpoint: 1024,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 1,
						arrows: false
					}
				}, {
					breakpoint: 767,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
						arrows: false,
						dots: false
					}
				}
				// You can unslick at a given breakpoint now by adding:
				// settings: "unslick"
				// instead of a settings object
			]
		});
	}).requireSlick();

Zurück zum Anfang

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen