Beispiele für JavaScript Konfigurationen

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.

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
  });
});

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
  });
});

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.

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