Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | slick_slider_layout [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== CSS Layouts für den Slick Slider ====== | ||
+ | Der '' | ||
+ | \\ Der Slick Slider bietet die Möglichkeit, | ||
+ | \\ Das Schöne am Slick Slider ist, dass dieser nicht nur Bilder animieren kann, sondern auch beliebige Inhalte, solange sie in einem <DIV> enthalten sind. | ||
+ | \\ Das CSS für den Slider findet sich in der Datei '' | ||
+ | \\ [[javascript_slider_konfiguration|Hier finden Sie]] mehrere JavaScript Konfigurationen für den Slick Slider. | ||
+ | \\ [[fluid_partials# | ||
+ | |||
+ | ===== Schaltflächen (dots) anpassen ===== | ||
+ | |||
+ | Sind die '' | ||
+ | \\ Die hier bezeichneten Abstände können je nach Größe der Slider Folie und der Positionierung anderer Elemente variieren. | ||
+ | |||
+ | **Dots über dem Bild positionieren** | ||
+ | |||
+ | ul.slick-dots { | ||
+ | position: relative; | ||
+ | margin-top: -180px; | ||
+ | margin-bottom: | ||
+ | } | ||
+ | |||
+ | **Abstände der Dots voneinander** | ||
+ | |||
+ | .slick-dots li { | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | } | ||
+ | |||
+ | **Den Dots ein Layout zuweisen** | ||
+ | |||
+ | .slick-dots li button { | ||
+ | list-style-type: | ||
+ | width: 18px; | ||
+ | height: 18px; | ||
+ | border-radius: | ||
+ | border: 1px #bbb solid; | ||
+ | background: #999; | ||
+ | } | ||
+ | |||
+ | **Aktiver Zustand eines Dots** (aktuelles Bild) | ||
+ | |||
+ | .slick-dots li.slick-active button { | ||
+ | width: 22px; | ||
+ | height: 22px; | ||
+ | margin-left: | ||
+ | border: 1px #ccc solid; | ||
+ | background: #ddd; | ||
+ | } | ||
+ | |||
+ | **Inhalt leeren** | ||
+ | \\ Als Standard wird ein Kreis in den Dot geschrieben. | ||
+ | \\ Dieser Standard wird überschrieben. | ||
+ | |||
+ | .slick-dots li button: | ||
+ | content: ''; | ||
+ | } | ||
+ | |||
+ | **Abstand des Dot anpassen** | ||
+ | |||
+ | .slick-dotted.slick-slider { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | |||
+ | |||
+ | ===== Pfeile vor und zurück ===== | ||
+ | |||
+ | Beim '' | ||
+ | |||
+ | **Gemeinsame Konfiguration für Hintergrundfarbe und Größe der Pfeile** | ||
+ | |||
+ | button.slick-prev.slick-arrow:: | ||
+ | button.slick-next.slick-arrow:: | ||
+ | color: #ccc; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | |||
+ | **Ausrichtung des linken Pfeils** (vorhergend) | ||
+ | |||
+ | button.slick-prev.slick-arrow { | ||
+ | left: 30px; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | **Ausrichtung des rechten Pfeils** (nächster) | ||
+ | |||
+ | button.slick-next.slick-arrow { | ||
+ | right: 70px; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | ===== Text über Bild im Slick Slider ===== | ||
+ | |||
+ | Der Slick Slider eignet sich hervorragend, | ||
+ | |||
+ | Der folgende Code gilt für ein ''< | ||
+ | |||
+ | **Absatz über dem Bild ausrichten** | ||
+ | |||
+ | # | ||
+ | position: relative; | ||
+ | min-width: 20%; | ||
+ | margin-top: -45%; | ||
+ | margin-bottom: | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | **Dem Absatz mit Link Rahmen und Hintergrund zuweisen** | ||
+ | |||
+ | # | ||
+ | background: rgba(200, | ||
+ | padding: 10px; | ||
+ | border-radius: | ||
+ | } | ||
+ | |||
+ | **Hover-Effekt für den Link mit Anpassung CSS** | ||
+ | |||
+ | # | ||
+ | background: rgba(250, | ||
+ | padding: 20px; | ||
+ | border-radius: | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | **Animation des Hover-Effekts per CSS** | ||
+ | |||
+ | # | ||
+ | transition: all ease 0.3s; | ||
+ | } | ||
+ | ===== Abschalten von Elementen der Navigation ===== | ||
+ | |||
+ | Der '' | ||
+ | \\ Im Folgenden werden Standards für TYPO3 als Grundlage für das Layout genutzt. Diese Elemente werden unterhalb der Breite eines Smartphones nach Bootstrap-Standard abgeschaltet. Oberhalb dieses Viewport sind sie sichtbar. | ||
+ | |||
+ | /* Ansicht Smartphone ohne Dots und Pfeile */ | ||
+ | @media (max-width: 786px) { | ||
+ | # | ||
+ | ul.slick-dots, | ||
+ | button.slick-prev.slick-arrow, | ||
+ | button.slick-next.slick-arrow { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | /* Ansicht Tabletts und Desktop mit Dots und Pfeilen */ | ||
+ | @media (min-width: 787px) { | ||
+ | # | ||
+ | ul.slick-dots, | ||
+ | button.slick-prev.slick-arrow, | ||
+ | button.slick-next.slick-arrow { | ||
+ | display: block; | ||
+ | } | ||
+ | } |