HpBk-TemplateWorld

Slideshow mit CSS

Slideshow mit CSS erstellen

Einleitung

Für eine tolle Slideshow mit vielen Effekten habe ich ja bereits das Tutorial Slideshow mit jQuery-Effekten geschrieben. Das Tutorial ist allerdings schon etwas umfangreicher und schwieriger, sodass ich jetzt eine einfache Slideshow für dich rausgesucht habe, die sich mit CSS erstellen lässt.

Schwierigkeitsstufe: Anfänger

Der HTML-Code

Der folgende Code muss auf der Seite eingefügt werden, auf der die Slideshow später zu sehen sein soll. Dazu gehst du auf "Seiten", wählst eine Seite aus und klickst im Editor oben links auf "Quellcode". Dort fügst du den folgenden Code ein.

<div class="cssslider">
  <img class='csssliderbild '  src="https://img.webme.com/pic/h/hpbk-templateworld/sliderbild1.jpg" alt="" />
  <img class='csssliderbild '  src="https://img.webme.com/pic/h/hpbk-templateworld/sliderbild2.jpg" alt="" />
  <img class='csssliderbild '  src="https://img.webme.com/pic/h/hpbk-templateworld/sliderbild3.jpg" alt="" />
  <img class='csssliderbild '  src="https://img.webme.com/pic/h/hpbk-templateworld/sliderbild4.jpg" alt="" />
</div>

Dieser Code sorgt dafür, dass wir 4 Bilder einfügen können. Natürlich kann die Anzahl der Bilder beliebig erweitert werden.

Der CSS-Code

Mit dem CSS-Code wird das Aussehen des Sliders bestimmt. Dafür wird folgender Code benötigt, der unter Design - Erweiterte Designeinstellungen im Feld "Text über dem Design" eingefügt wird. Wenn du ein CSS-Design besitzt, musst du den folgenden Code ohne die Style-Tags in das Feld "CSS-Code ohne Style Tags" einfügen.

<style type="text/css"> 
<!--
.cssslider {
  margin:20px auto;
  width:500px;
  height:375px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#F5F5F5;
  border-left-color:#CCCCCC;
  border-bottom-color:#F5F5F5;
  border-right-color:#CCCCCC;
  position:relative;
}

.csssliderbild {
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
  
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
--> 
</style>

Hier könnt ihr natürlich entsprechende Änderungen vornehmen, die das Aussehen betreffen. Über width wird die Breite der Bilder definiert, height definiert die Höhe der Bilder. Ihr solltet die Bilder, die ihr in eurer Slideshow einsetzt in der richtigen Größe anlegen, also in der Größe, die ihr im CSS-Code angegeben habt.

So sieht die Slideshow aus:

Das ging doch mal schnell oder? Eine einfache Slideshow, ohne viel Schnick Schnack. Viel Spaß beim Ausprobieren!

Kommentare zu dieser Seite:

Kommentar von Ralf( ralf.zimmermannstar-naildesign.com ), 08.06.2016 um 12:46 (UTC):
Hallo,
ich würde gerne eine Sildeshow auf meiner Internetseite integrieren.
Die Programmierung des HTML Codes bekomme ich hin, aber die Programmierung des CSS-Codes in mein Webdesign bekomme ich leider nicht hin.
Wo muss ich die Programmierung in meinem Shopsystem von Plentymarkets integrieren.
Kann mir da einer helfen.
Gruss Ralf