Slider
Einen individuellen Slider einfach und kostenlos erstellen. Wie der Slider aussehen kann seht ihr oben in meinem Design. Und so gehts:1. Slider generieren
Zu erst geht ihr auf die Seite auf der ihr euch nach euren Vorstellungen einen Slider erstellen könnt. http://rhinoslider.com/demo-download/ . Wenn ihr auf dem Pfeil neben den Tabs klickt speichern sich die Einstellungen und ihr könnt unten die Demo eures Sliders betrachten. Sobald ihr zufrieden seit könnt ihr das Ergebnis mit einem Klick auf "GET RHINOSLIDER 1.05" downloaden.
2. Stylecode anpassen
Nun müsst ihr die Dateien (mit Winrar z.B.) entpacken und die .css-Datei öffnen. Dort seht ihr zwei URLs, die noch angepasst werden müssen. Daher ladet das Bild "rhinoslider-sprite" beim Hoster eures Vertrauens hoch, kopiert die URL des Bilder und fügt diese dementsprechend in den CSS-Code ein.
3. Im HPBK einfügen
3.1 Javascript einfügen und anpassen
Beim Download war auch eine index.html dabei, die ihr nun öffnen müsst. Wenn ihr jetzt euren Slider seht klickt Rechtsklick -> Seitenquelltext anzeigen und kopiert den Abschnitt von <link type="... bis zum letzten </script>. Logt euch danach im HPBK ein und fügt diesen Teil des Codes bei Text über dem Design ein. Auch hier befinden sich noch Links, die angepasst werden müssen. Also schaut im Code, wie die Datei heißt, sucht im gedownloadeten Ordner nach dieser, ladet sie hoch und fügt die URL an die passende Stelle ein.
3.2 Stylecode einfügen
Ein Teil des CSS-Codes ist ja nun über die .css-Datei eingefügt worden, aber es fehlt noch ein kleiner Part. Wenn ihr das CSS-Design benutzt fügt diesen Code
Code
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0; }
#slider li { list-style:none; }
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0; }
#slider li { list-style:none; }
bei CSS-Code ohne Styletags und bei den anderen Designs bei Text über dem Design ein.
3.3 Slider sichtbar machen
Nun kopiert ihr diesen Teil
Code
