Sie befinden sich hier: start » javascript_slider_konfiguration

Beispiele für JavaScript Konfigurationen

Beispiele für JavaScript Konfigurationen

Konfiguration des SlickSlider

Zum Einsatz kommt der SlickSlider.
Für mehrere Slider sind unten die Konfigurationen beschrieben.
CSS Vorlagen für den Slick Slider finden Sie hier.
Wie man den Slick Slider in ein Fluid Template oder Fluid Partial einbindet, erfahren Sie hier.

Slick Slider per ID ansprechen

Der Normalfall für den Slick Slider ist die Animation von Bildern. Eine Möglichkeit ist dabei, diese über eine ID (hier: #SlickSlider) anzusprechen und damit den Prozess für den Slider auszulösen:

$(document).ready(function(){
  $("#SlickSlider").slick({
    dots: true,
    fade: false,
    infinite: true,
    mobileFirst: true,
    speed: 2000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true,
    adaptiveHeight:true
  });
});

Slider in Reiseberichten

Mit diesem Slider werden die Reisebericht in der Georgienseite animiert.
Dabei werden nicht nur reine Bilder in Bewegung gesetzt, sondern einzelne <DIV> Tags, in denen sich formatierte Texte mit Links und Bilder sowie Buttons befinden.
Als Selector kommt in diesem Fall eine CSS Klasse (.ReiseSlider) zum Einsatz.

$(document).ready(function(){
  $('.ReiseSlider').slick({
    dots: false,
    fade: true,
    infinite: true,
    mobileFirst: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    adaptiveHeight: true
  });
});

Slider mit Bilder für Navigation

Dieses Element des Slick Slider stellt im oberen Bereich eine Großansicht des Bildes bereit. Im unteren Bereich laufen alle verfügbaren Bilder als Miniaturen durch und können verschoben sowie angeklickt werden.

Oberer Teil mit großen Bildern

$('#SlickSliderPage').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  infinite: true,
  fade: true,
  speed: 2000,
  dots: true,
  asNavFor: '#SlickSliderNav'
});

Leiste mit Bildern zur Navigation

$('#SlickSliderNav').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '#SlickSliderPage',
  arrows: false,
  dots: false,
  centerMode: true,
  focusOnSelect: true
});

Die Variable asNavFor verweist auf das jeweils andere Objekt des Sliders.

Variablen der JavaScript Konfiguration

Der Slider kann per CSS Style oder über eine ID angesprochen werden. Im Zweifelsfall sollte man die ID als Selektor verwenden, da über diese auch CSS Styles eindeutiger zu formatieren sind.

ID Selektor

$('#SlickSilder').slick({
  [...Ihre Konfiguration...]
});

CSS Selektor

$('.SlickSilder').slick({  
  [...Ihre Konfiguration...]
});

Dots ein- oder ausschalten

dots: true / false

Pfeile vor / zurück ein- oder ausschalten

arrows: true / false

Austausch der Bilder zwischen Slider und Fader

fade: true / false

Geschwindigkeit, in der Austausch der Bilder erfolgt (in Millisekunden)

speed: 1000

Anzahl der angezeigten Bilder

slidesToShow: 1

Anzahl der bei einem Event verschobenen Bilder

slidesToScroll: 1

Starten des automatischen Spielvorganges

autoplay: true / false

Zeitlicher Abstand zwischen den Bildwechseln (in Millisekunden)

autoplaySpeed: 3000
javascript_slider_konfiguration.txt · Zuletzt geändert: 2023.12.12 16:02
CC Attribution-Share Alike 4.0 International Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International