Slideshows nur mit CSS - Teil 1

Man findet im Internet eine ganze Reihe von Slideshow, die sich auch zum Einbau bei nPage eigenen. Die meisten von ihnen benötigen jedoch einen großen Ballast an JavaScript-Bibliotheken. Die gilt vor allem für solche Slideshows, die die Featuritis haben, d.h. unzählige Einstellungen und Anpassungen ermöglichen - die der Nutzer aber oft gar nicht benötigt. Daher stelle ich hier einige Slideshows vor, die nur mit Hilfe von CSS funktionieren. Ja, natürlich HTML ist immer dabei und beim CSS-Code wird auch ausgiebig gebrauch gemacht vom Standard CSS3. Doch keine Sorge, es handelt sich immer um solche CSS3-Anweisungen, die von allen gängigen Browser verstenden werden. Also los geht es.

Beispiel 1 einfacher geht es nicht

Bei dieser Slidershow werden die Bilder einfach nur nacheinander eingeblendet. Gegenüber einer GIF-Animation hat man aber mindestens den Vorteil, dass man die Anzeigedauer durch einfache Änderungen im CSS-Code ändern kann.

Quellcode zu diesem Beispiel

CSS

Im CSS-Code muss darauf geachtet werden, dass für jedes Bild eine Zeile festgeelgt wird

<style type="text/css">
/* Hier die Anzeigegroesse anpassen, wenn Bild groesser wird abgeschnitten */
.container{
  margin:10px auto;
  width:750px;
  height:250px;
  overflow:hidden;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
}
/* Bild wird doch nicht abgeschnitten sondern verkleinert, dass es passt */
.container img{
width:100%
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
}
/* jedes Bild ein Delay, Unterschied 4 Sekunden */
img:nth-child(5){animation-delay:0s;}
img:nth-child(4){animation-delay:4s;}
img:nth-child(3){animation-delay:8s;}
img:nth-child(2){animation-delay:12s;}
img:nth-child(1){animation-delay:16s;}
</style>

HTML

<div class="container">
<img alt="" class="photo" src="https://file2.hpage.com/013376/95/bilder/css-slideshow-1.jpg" />
<img alt="" class="photo" src="https://file2.hpage.com/013376/95/bilder/css-slideshow-2.jpg" />
<img alt="" class="photo" src="https://file2.hpage.com/013376/95/bilder/css-slideshow-3.jpg" />
<img alt="" class="photo" src="https://file2.hpage.com/013376/95/bilder/css-slideshow-4.jpg" />
<img alt="" class="photo" src="https://file2.hpage.com/013376/95/bilder/css-slideshow-5.jpg" />
</div>

Nach oben