Slideshow mit CSS

<div class="cssslider">
<img class="csssliderbild " src="https://img.webme.com/pic/w/website-support/slide-4.png" alt="" />  
<img class="csssliderbild " src="https://img.webme.com/pic/w/website-support/slide-3.png" alt="" />  
<img class="csssliderbild " src="https://img.webme.com/pic/w/website-support/slide-2.png" alt="" />  
<img class="csssliderbild " src="https://img.webme.com/pic/w/website-support/slide-1.png" alt="" /></div>

Fügt den grün makierten Teil in dem Quelltext auf deiner Seite ein.


<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>


Fügt diesen Text ein auf der Seite Design>Mehr Einstellungen>Text über dem Design.

Ich hoffe dieses Tutorial war hilfreich, natürlich würde ich mich über Rückmeldungen in den Kommentaren freuen.