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 ''Slick Slider'' von Ken Wheeler erfreut sich großer Beliebtheit. Dieser auf ''jQuery'' basierende Slider ist einfach zu konfigurieren und gut [[http://kenwheeler.github.io/slick/|dokumentiert]]. Die folgenden Konfigurationen sind mit der ''Version 1.8.1'' des Slick Slider getestet.
 +\\ Der Slick Slider bietet die Möglichkeit, zwischen verschiedenen Inhalten mit Pfeilen oder Schaltflächen (dots) hin und her zu schalten. Layouts dazu sind unten auf dieser Seite beschrieben.
 +\\ 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 ''slick-theme.css'' im Verzeichnis des Slick Slider. Hier finden Sie auch die Styles, die Sie im eigenen Style Sheet überschreiben können.
 +\\ [[javascript_slider_konfiguration|Hier finden Sie]] mehrere JavaScript Konfigurationen für den Slick Slider.
 +\\ [[fluid_partials#header_mit_slick_slider|Auf dieser Seite]] erfahren Sie, wie Sie den Slick Slider in ein Fluid Template oder ein Fluid Partial einbinden.
 +
 +===== Schaltflächen (dots) anpassen =====
 +
 +Sind die ''dots'' in der [[javascript_slider_konfiguration|JavaScript Konfiguration]] des Slick Slider eingeschaltet, können diese per eigenem CSS überschrieben werden.
 +\\ 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: 40px;
 +  }
 +
 +**Abstände der Dots voneinander**
 +
 +  .slick-dots li {
 +    margin-left: 5px;
 +    margin-right: 5px;
 +  }
 +
 +**Den Dots ein Layout zuweisen**
 +
 +  .slick-dots li button {
 +    list-style-type: none;
 +    width: 18px;
 +    height: 18px;
 +    border-radius: 18px;
 +    border: 1px #bbb solid;
 +    background: #999;
 +  }
 +
 +**Aktiver Zustand eines Dots** (aktuelles Bild)
 +
 +  .slick-dots li.slick-active button {
 +    width: 22px;
 +    height: 22px;
 +    margin-left: -2px;
 +    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:before {
 +    content: '';
 +  }
 +
 +**Abstand des Dot anpassen**
 +
 +  .slick-dotted.slick-slider {
 +    margin-bottom: 0;
 +  }
 +
 +
 +===== Pfeile vor und zurück =====
 +
 +Beim ''Slick Slider'' kann man je nach Konfiguration des [[javascript_slider_konfiguration|JavaScript]] Pfeile einschalten, mit denen man zur vorhergehenden oder zur nächsten Folie schalten kann. Diese Pfeile sind allerdings oft nach der Einbindung des Slider nicht sichtbar, da sie sich außerhalb des Bildes befinden. Mit dem folgenden ''CSS Snippet'' können die Pfeile über das Bild geholt werden.
 +
 +**Gemeinsame Konfiguration für Hintergrundfarbe und Größe der Pfeile**
 +
 +  button.slick-prev.slick-arrow::before, 
 +  button.slick-next.slick-arrow::before {
 +    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, um einem Bild zusätzliche Information zu überlagern. So ist es möglich, ein Inhaltselemente ''Text und Bild'', also ''textpic'', als Grundlage für einen Slider zu nehmen. Aus dem von TYPO3 generierten Code kann man nun das Element ''ce-bodytext'' nehmen und per CSS über das Bild legen. Dieses kann auch für mehrere Absätze nehmen, die man per ''nth-child(n)'' angreifen kann.
 +
 +Der folgende Code gilt für ein ''<DIV>'', dass die ''ID'' ''SlickSlider'' enthält. Diese kann natürlich in einem Fluid Template beliebig vergeben werden.
 +
 +**Absatz über dem Bild ausrichten**
 +
 +  #SlickSlider > div > div > div > div > div.ce-bodytext > p {
 +    position: relative;
 +    min-width: 20%;
 +    margin-top: -45%;
 +    margin-bottom: 50%;
 +    text-align: center;
 +  }
 +
 +**Dem Absatz mit Link Rahmen und Hintergrund zuweisen**
 +
 +  #SlickSlider > div > div > div > div > div.ce-bodytext > p > a {
 +    background: rgba(200,200,200,0.7);
 +    padding: 10px;
 +    border-radius: 20px;
 +  }
 +
 +**Hover-Effekt für den Link mit Anpassung CSS**
 +
 +  #SlickSlider > div > div > div > div > div.ce-bodytext > p > a:hover {
 +    background: rgba(250,250,250,0.8);
 +    padding: 20px;
 +    border-radius: 40px;
 +    text-decoration: none;
 +  }
 +
 +**Animation des Hover-Effekts per CSS**
 +
 +  #SlickSlider > div > div > div > div > div.ce-bodytext > p > a {
 +    transition: all ease 0.3s; 
 +  }
 +===== Abschalten von Elementen der Navigation =====
 +
 +Der ''Slick Slider'' ist hervorragend für die Einbindung in responsiven Webseiten geeignet. Wenn der Bildschirm zu klein ist, nutzt allerdings alles Kunst im CSS nichts - es ist dann oftmals besser, Elemente der Navigation wie die Pfeile oder die Dots abzuschalten.
 +\\ 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) {
 +    #SlickSlider > div > div > div > div > div.ce-bodytext > p,
 +    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) {
 +    #SlickSlider > div > div > div > div > div.ce-bodytext > p,
 +    ul.slick-dots, 
 +    button.slick-prev.slick-arrow,
 +    button.slick-next.slick-arrow {
 +      display: block;
 +    }
 +  }