Die Aufgaben bauen auf der vorangegangenen JavaScript Übung auf.
GitHub Classroom Assignment zur Bearbeitung der Aufgaben.
Bitte comitten und pushen Sie ihren Code nach jedem Step.
Erweitern Sie die gegebene Slideshow Klasse so, dass eine Navigation innerhalb der Slideshow über Swipe Gesten möglich ist. Bei einem Swipe nach links soll das nächste Bild und bei einem Swipe nach rechts das vorherige Bild eingeblendet werden.
Die Erkennung der Fingergesten ist in der Klasse Swipe
implementiert. Bitte verwenden Sie diese zur Lösung der Aufgabe.
Jetzt geht es darum die Slideshow Klasse so zu erweitern, dass die Slides dynamisch generiert werden.
Codesnippet zum Abrufen von Daten über die Fetch API
async function fetchData(apiURL) {
let response = await fetch(apiURL);
if(!response.ok) {
throw new Error(response.statusText);
}
let data = await response.json();
return data;
}
fetchData(url)
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log('error', error);
});
Laden Sie dazu mit Hilfe der Fetch API die content.json
aus dem JSON-Ordner vom Server.
Erzeugen Sie nun auf Basis der Response die benötigten DOM Elemente für die Slides.
Erweitern Sie ihren Code dahingegend, dass die Inhalte der Sidebar vollständig auf Basis der JSON Daten generiert werden.