Anleitung: Ein Karussell mit Javascript entwickeln

Unter Berücksichtigung dieser Aspekte kann man nun daran gehen, das Karussell zu erstellen, wobei nur die vier Storys gezeigt werden sollen, die für dieses Beispiel verwendet werden.

Einen Design-Wettbewerb gewinnt man damit noch nicht. Daher sollen die <div>-Elemente etwas ansprechender gestaltet werden, sodass sie wie die gängigen Karussells aussehen:

Das sieht schon besser aus, wird aber kaum richtig rotieren, wenn alle Elemente untereinander angeordnet sind. Um dafür zu sorgen, dass alle <div>-Elemente übereinander liegen, fügt man der Klasse storydiv den folgenden Eintrag hinzu:

position:absolute;

Das führt zu einem großen Durcheinander. Um etwas Ordnung in das Ganze zu bringen, versteckt man einfach die <div>-Elemente mit den IDs story2 bis story4 mithilfe von

display:none