Bilder-Slider ganz einfach mit Fading in und out.
Als erstes erstelle im Root deiner Webseite einfach einen neuen Ordner wie z. B. bilder und lade 4 Bilder mit .jpg Endung dort hoch.
Erstelle dann in deinen Forensystem wie z. B. Woltlab im ACP einfach eine neue Seite in Html mit Namen Galerie und füge folgenden Code im Reiter Inhalt ein.
HTML
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:800px">
<p><center>Bilder-Slider.</center></p>
<img class="mySlides w3-animate-fading" src="bilder/1.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="bilder/2.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="bilder/3.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="bilder/4.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>
</body>
</html>Speichere die neu erstellte Seite jetzt ab, rufe die erstellte Seite im Menü auf und betrachte deine erstellte Slide-Show.
mg Engelchen 
