Sie befinden sich hier: start » slick_slider_layout

CSS Layouts für den Slick Slider

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 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.
Hier finden Sie mehrere JavaScript Konfigurationen für den 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 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 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;
  }
}