CSS-Bildwechsler | Die Slideshow

Darum geht es

Der im Kopfbereich eingebaute Bildwechsler ist einzig mit CSS programmiert und funktioniert immer, also auch wenn Javacript im Browser des Besuchers deaktiviert wurde. Das ist der Vorteil von CSS gegenüber Javascript (Jquery). In den Bildwechsler integriert wurde ein Anzeiger für die Gesamtzahl der Bilder, welche im Wechsler getauscht werden. Man sieht also ein Kamera-Icon und daneben die Zahl X (Foto-Nummer) von X (Gesamtzahl).

Demos - 3 oder 4 Fotos

Möchten Sie statt der 5 Fotos im Wechsler lieber nur 4 oder gar 3 tauschen, so ist das möglich, wir haben für Sie eine entsprechende Demo anbei, damit Sie es nachvollziehen können, wie nachstehend.

Demo - 5 oder mehr Fotos

Sie finden den wesentlichen Code für die Slideshow also bei den jeweiligen Demos sowie natürlich den kompletten Code in der Datei 'animation.css'. Dort ist der Code ja bereits vorsorglich angelegt für 3, 4 und 5 Bilder. Nach dem Schema lassen sich aber auch mehr als die 5 Fotos tauschen. Wer mag, probiert zum Beispiel mal einen Wechsel von 10 Fotos aus und orientiert sich damit bezgl. des Verständnisses praktischerweise wegen der Verdopplung an dem 5-Bilder-Schema.

Das Logo

1.) Oben haben wir ein grafisches Logo eingebaut, welches natürlich durch ihres getauscht werden sollte:


So sieht der Code in der HTML-Datei dafür aus:

HTML
<div class="name">
<img src="images/logografik.png" width="600" height="90" alt="">
</div>

2.) Noch einfacher: Logo als Text-Schriftzug. Wir haben dafür extra eine Schrift mit einem schönen 'Italic-Schnitt' gewählt. Vorsorglich haben wir bereits die CSS-Klasse '.name' definiert, damit Sie wenn Sie möchten, anstelle eines grafischen Logos auch einen normalen Text-Schriftzug platzieren können, wie als Beispiel nachstehend, denn dies ist sehr viel einfacher, da Sie nur den Homepagenamen als Text eintippen müssen:

HTML
<div class="name">
Travel To Distant Lands
</div>

Infos zur Technik

Diese Responsive-Vorlage arbeitet bezüglich der CSS-Media-Queries (Bildschirmabfragen) mit der Mobile-First-Technik. Die Slideshow haben wir mit purem CSS gestaltet, das gilt auch für den Bildanzeiger innerhalb der Slideshow, welcher die Gesamtzahl der zu wechselnden Bilder anzeigt. Außerdem nutzen wir bezüglich CSS das Border-Box-Model (box-sizing: border-box) sowie die Maßeinheit für Prozentschrift namens REM. Jquery (Javascript) verwenden wir hier für das Smooth-Scrolling beim Nach-Oben-Pfeil sowie für die Foto-Galerie (Lightbox).

Was heisst eigentlich Mobile-First?

Die in Bezug auf das Responsive Webdesign angesagte Mobile-First-Technik (von klein auf groß) bietet eine bessere Performance-Leistung gegenüber der Desktop-First-Technik (von groß auf klein).

Das Coding für die kleinste mobile Bildschirmauflösung, nämlich das Smartphone, steht direkt am Anfang der CSS-Datei und wird somit sofort geladen, erst später im Code werden dann per Media Queries - Abfragen der Bildschirmgröße bezüglich der Mindestbreite (min-width) - andere, abweichende, größere Bildschirmauflösungen, wie Tablet, Notebook, Laptop und schließlich Desktop-PC angesprochen.

Bilder & Icons

Bilder

Die Fotos in dieser Vorlage sind vom Foto-Anbieter Picjumbo. Wir haben diese innerhalb unseres Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die sehr verbreitete Icon-Schrift vom Anbieter "Fontawesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht. Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.