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:// | ||
+ | \\ 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# | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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: ''# | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $("# | ||
+ | dots: true, | ||
+ | fade: false, | ||
+ | infinite: true, | ||
+ | mobileFirst: | ||
+ | speed: 2000, | ||
+ | slidesToShow: | ||
+ | slidesToScroll: | ||
+ | autoplay: true, | ||
+ | autoplaySpeed: | ||
+ | arrows: true, | ||
+ | adaptiveHeight: | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | ==== Slider in Reiseberichten ==== | ||
+ | |||
+ | Mit diesem '' | ||
+ | \\ Dabei werden nicht nur reine Bilder in Bewegung gesetzt, sondern einzelne ''< | ||
+ | \\ Als Selector kommt in diesem Fall eine CSS Klasse ('' | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $(' | ||
+ | dots: false, | ||
+ | fade: true, | ||
+ | infinite: true, | ||
+ | mobileFirst: | ||
+ | speed: 1000, | ||
+ | slidesToShow: | ||
+ | slidesToScroll: | ||
+ | autoplay: true, | ||
+ | autoplaySpeed: | ||
+ | arrows: false, | ||
+ | adaptiveHeight: | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | ==== Slider mit Bilder für Navigation ==== | ||
+ | |||
+ | Dieses Element des '' | ||
+ | |||
+ | **Oberer Teil mit großen Bildern** | ||
+ | |||
+ | $('# | ||
+ | slidesToShow: | ||
+ | slidesToScroll: | ||
+ | arrows: true, | ||
+ | infinite: true, | ||
+ | fade: true, | ||
+ | speed: 2000, | ||
+ | dots: true, | ||
+ | asNavFor: '# | ||
+ | }); | ||
+ | | ||
+ | **Leiste mit Bildern zur Navigation** | ||
+ | |||
+ | $('# | ||
+ | slidesToShow: | ||
+ | slidesToScroll: | ||
+ | asNavFor: '# | ||
+ | arrows: false, | ||
+ | dots: false, | ||
+ | centerMode: true, | ||
+ | focusOnSelect: | ||
+ | }); | ||
+ | |||
+ | Die Variable '' | ||
+ | ==== 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** | ||
+ | |||
+ | $('# | ||
+ | [...Ihre Konfiguration...] | ||
+ | }); | ||
+ | |||
+ | **CSS Selektor** | ||
+ | |||
+ | $(' | ||
+ | [...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, | ||
+ | |||
+ | speed: 1000 | ||
+ | |||
+ | **Anzahl der angezeigten Bilder** | ||
+ | |||
+ | slidesToShow: | ||
+ | |||
+ | **Anzahl der bei einem Event verschobenen Bilder** | ||
+ | |||
+ | slidesToScroll: | ||
+ | |||
+ | **Starten des automatischen Spielvorganges** | ||
+ | |||
+ | autoplay: true / false | ||
+ | |||
+ | **Zeitlicher Abstand zwischen den Bildwechseln** (in Millisekunden) | ||
+ | |||
+ | autoplaySpeed: | ||