CSS/Anwendung und Praxis/Bilderkarussell

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

IIn diesem Tutorial lernen Sie, wie Sie ein Bilderkarussell mit CSS gestalten.

Bevor Sie diese Technik auf Ihrer Webseite übernehmen, sollten Sie sich aber über die Nachteile eines Karussells im Klaren sein:

  • Inhalte sind nicht sofort ersichtlich und (mindestens) einen Klick oder Wischer vom Nutzer Ihrer Seite entfernt.
  • Viele Nutzer warten nicht den Durchlauf eines Karussells ab, sondern verlassen die Seite vorher.

Anwendungsbeispiel[Bearbeiten]

HTML-Grundstruktur[Bearbeiten]

Für die HTML-Struktur legen wir Bilder in ein div mit der id gallery. Die Bilder werden von einem figure-Element mit einer zusätzlichen figcaption für eine Bildunterschrift umschlossen.

Beispiel ansehen …
<div id="gallery">
  <figure>
    <img src="" alt="">
    <figcaption>Bilderklärung</figcaption>
  </figure>
  ...
</div>

CSS: Ausrichtung und Position[Bearbeiten]

Beispiel
#gallery {
  width: 20em;
  height: 15em;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 40em)  { 
#gallery {
  width: 40em;
  height: 30em;
}
}

@media (max-width: 60em)  { 
#gallery {
  width: 60em;
  height: 45em;
}
}
  
#gallery figure {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

#gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: white;
}

#gallery img {
  width: 100%;
  margin: 0;
  padding: 0;  
}

Damit die Bilder genau in das div mit der Klasse slider passen, werden Innen- und Außenabstände von #gallery figure und #gallery img auf 0 gesetzt.

Die Höhe des Bildwechslers wird nun mit height auf 75% der Breite festgelegt. Da das Elternelement main keine feste Höhe hat, können hier leider keine Prozentwerte verwendet werden. Als Notbehelf werden nun 2 Breakpoints festgelegt, bei denen das Karussell mittels media queries entsprechend größer dargestellt wird.

Außenliegende Inhalte werden mit overflow: hidden ausgeblendet.

Die Bildunterschrift wird mit position: absolute etwas oberhalb des unteren Bildrands positioniert.

CSS: Animation[Bearbeiten]

Für die Animation verwenden wir die zusammenfassende CSS3-Eigenschaft animation.

Beispiel ansehen …
#gallery figure {
  height: 100%;
  animation: slide 18s infinite ease-in-out;
}

#gallery:hover figure {
  animation-play-state: paused;
}
Es wird nun eine Animation mit dem Namen slide aufgerufen, die 18s dauert und durch den Wert infinite unendlich oft wiederholt wird. Der Wert ease-in-out sorgt für einen Übergang mit einem langsamen Start und Ende.

Sie können auch die Einzeleigenschaften verwenden:

Falls jemand mit der Maus über dem Slider verharrt, wird die Eigenschaft

Beachten Sie: Sie benötigen für die Eigenschaft animation für ältere Versionen von Safari und Android noch den Browserpräfix -webkit-, der hier aus Gründen der Vereinfachung weggelassen wurde.

Anlegen der einzelnen Animationsschritte[Bearbeiten]

Zu jeder Animation gehört eine Festlegung der einzelnen Animationsschritte mittels der @keyframes-Regel.

Beispiel ansehen …
@keyframes slide {
    0%     {top: 0}
    12%  {top: 0}
    16%  {top: -100%}
    28%  {top: -100%}
    32%  {top: -200%}
    44%  {top: -200%}
    48%  {top: -300%}
    60%  {top: -300%}
    65%  {top: -400%}
    78%  {top: -400%}
    83%  {top: -500%}
    95%  {top: -500%}
    100% {top: 0}
}
Die @keyframes-Regel wird durch den Namen slide aufgerufen.

Die Prozentangaben stellen die einzelnen Animationsschritte dar. In den geschweiften Klammern finden Sie nun die CSS-Eigenschaft top, die die Position der einzelnen figure-Elemente festlegt.

Wenn die Animation aufgerufen wird, animiert sie dann das figure-Element anhand der angegebenen Werte. Anfänglich ist das erste figure-Element für 12% der Animationsdauer sichtbar und wird dann innerhalb von 4 % der Animationsdauer nach oben geschoben.

Die Werte für die einzelnen keyframes müssen Sie leider mit der Hand ausrechnen und bei einer Änderung der Anzahl der Bilder aktualisieren.

Fazit[Bearbeiten]

Einerseits ist es problemlos möglich, mehrere Bilder mit CSS-animation in einem Karussell ein- und ausschweben zu lassen. Andererseits gibt es neben dem Pausieren keine weiteren Steuerungsmöglichkeiten und viele Festlegungen der animation befinden sich im CSS-Code, der dann bei Änderungen des Inhalts entsprechend angepasst werden müsste. Dazu kommt die Problematik, dass seitenfüllende Bilder angesichts der Vielzahl von möglichen Viewports nur schwer möglich sind.

Mit dem Checkbox-Hack können Sie eine Steuerung erreichen, wie in diesem Codepen-Beispiel von Marc Haunschild. Diese Funktionalität erhöht die Komplexität des CSS aber erneut um ein Vielfaches.

Bequemer und eleganter geht dies aber doch mit JavaScript, wie Sie im folgenden Tutorial sehen können.

CSS:

Weblinks[Bearbeiten]