Erzeuge eine Slideshow in HTML, CSS und Javascript
Eine Slideshow soll eine Reihe von Abbildungen auf kleinem Raum betrachtbar machen. Dabei wird stets nur ein Bild angezeigt. Die anderen werden entweder automatisch durchlaufen, von Hand weiter und zurück navigiert, oder per Pagination direkt aktiviert.
Grundsätzlich funktionieren Slideshows (oder Carousels) meist so, dass die Bilder in HTML und CSS eingebunden und gestaltet werden und anschliessend alle bis auf das erste verborgen werden, zB. mit display: none, opacity: 0 oder ähnlichen Eigenschaften.
Die Bedienung erfolgt meist über Javascript. Die derzeit aktive Abbildung wird entweder über einen Timer setInterval() oder Mausklicks/Taps addEventListener() festgelegt. Das heisst, man benötigt oft Navigationselemente wie Buttons für „Weiter“ oder „Zurück“ oder eine Möglichkeit, Bilder direkt anzusteuern mit Links für „1“, „2“, „3“, etc.
Bei Klick oder Timeout werden dann zunächst alle (oder nur die derzeit sichtbare?) Folie/Bild ausgeblendet, und das nächste (oder gewünschte) eingeblendet. Wenn man sauber arbeiten möchte, sollte man das umsetzen, indem die jeweiligen Elemente CSS-Klassen hinzugefügt oder entfernt bekommen, siehe classList.add() und classList.remove()
let slideIndex = 1;
let targetElement = document.querySelector('#slide-' + slideIndex);
targetElement.classList.add('sichtbar');Bonusaufgabe:
- Die Übergänge zwischen den einzelnen Folien lassen sich auch animieren. Dafür kann man entweder Javascript verwenden, oder etwas moderner Arbeiten und CSS Transitions einsetzen. Damit lassen sich Übergänge von zB.
opacity: 0.0zuopacity: 1.0sanft animieren.
Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.