HpBk-TemplateWorld | Alles für dich.

Slideshow mit CSS

Slideshow mit CSS erstellen

Einleitung
Für eine tolle Slideshow mit vielen Effekten habe ich ja bereits das Tutorial Slideshow mit jQuery-Effekten geschrieben. Das Tutorial ist allerdings schon etwas umfangreicher und schwieriger, sodass ich jetzt eine einfache Slideshow für dich rausgesucht habe, die sich mit CSS erstellen lässt.

Schwierigkeitsstufe: Anfänger

Der HTML-Code

Der folgende Code muss auf der Seite eingefügt werden, auf der die Slideshow später zu sehen sein soll. Dazu gehst du auf "Seiten", wählst eine Seite aus und klickst im Editor oben links auf "Quellcode". Dort fügst du den folgenden Code ein.
Dieser Code sorgt dafür, dass wir 4 Bilder einfügen können. Natürlich kann die Anzahl der Bilder beliebig erweitert werden.

Der CSS-Code

Mit dem CSS-Code wird das Aussehen des Sliders bestimmt. Dafür wird folgender Code benötigt, der unter Design - Erweiterte Designeinstellungen im Feld "Text über dem Design" eingefügt wird. Wenn du ein CSS-Design besitzt, musst du den folgenden Code ohne die Style-Tags in das Feld "CSS-Code ohne Style Tags" einfügen.

Hier könnt ihr natürlich entsprechende Änderungen vornehmen, die das Aussehen betreffen. Über width wird die Breite der Bilder definiert, height definiert die Höhe der Bilder. Ihr solltet die Bilder, die ihr in eurer Slideshow einsetzt in der richtigen Größe anlegen, also in der Größe, die ihr im CSS-Code angegeben habt.

So sieht die Slideshow aus:

Das ging doch mal schnell oder? Eine einfache Slideshow, ohne viel Schnick Schnack. Viel Spaß beim Ausprobieren!



Kommentare zu dieser Seite:
Kommentar von Ralf( ralf.zimmermannstar-naildesign.com ), 08.06.2016 um 12:46 (UTC):
Hallo,
ich würde gerne eine Sildeshow auf meiner Internetseite integrieren.
Die Programmierung des HTML Codes bekomme ich hin, aber die Programmierung des CSS-Codes in mein Webdesign bekomme ich leider nicht hin.
Wo muss ich die Programmierung in meinem Shopsystem von Plentymarkets integrieren.
Kann mir da einer helfen.
Gruss Ralf
:'



Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 635984 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.