Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


javascript_slider_konfiguration [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Beispiele für JavaScript Konfigurationen ======
 +
 +===== Konfiguration des SlickSlider =====
 +
 +
 +Zum Einsatz kommt der [[http://kenwheeler.github.io/slick/|SlickSlider]].
 +\\ Für mehrere Slider sind unten die Konfigurationen beschrieben.
 +\\ CSS Vorlagen für den Slick Slider [[slick_slider_layout|finden Sie hier]].
 +\\ Wie man den Slick Slider in ein Fluid Template oder Fluid Partial einbindet, [[fluid_partials#header_mit_slick_slider|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