- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
Looped Slider
November 15, 2010
Es ist ein Slider-Script, das man zur Erstellung von Sliders oder Galerien nutzt. Es ist einer des flexibelsten Slider Scripts.
http://github.com/nathansearles/loopedSlider
JavaScript
Damit das Script funktioniert muss die index-#.html Datei mit einem Slider diese Zeile des HTML-Codes haben, um das loopedslider.js Script und das jQuery Framework zu setzen:
Im <head>Bereich der index-#.html Datei gibt es diese Zeile des Codes, die Script-Funktionalität mit Grundwerten initialisieren:
Dieses Script wird mit einem <div>-Element mit der #loopedSlider ID initialisiert.
HTML
So sieht die Darstellung vom HTML Skript aus:
Der ganze Slider sitzt im <div> Tag mit der #loopedSlider ID. Dann stehen zwei Container <div> Tags: Hauptcontainer (.container-Klasse) und Pagination Container (.pagination-container Klasse). Ein <div> Tag mit der .slides Klasse wird im Hauptcontainer platziert und hat Slider- (oder Galerie) Elementen. Um eine extra Folie (oder Galerie-Bild) hinzuzufügen, platzieren Sie die folgende Codierungsstruktur:
Eine unsortierte Liste (<ul> Tag) mit der .pagination Klasse definiert die Ausgang von Paginierung für den Slider (oder eine Galerie) .
Für die Version 0.5.4 (und früher) vom loopedSlider müssen Sie die entsprechende Anzahl der Anker(<a> Tags) eingeben, jede Folie soll ein entsprechende Anker haben.
Für loopedSlider Version 0.5.5 und höher fügt das Plug-In ein benötige Scripting automatisch setzt.
CSS
In der style.cssHauptdatei finden Sie die Stylesheets, die mit dem Script verbunden sind. Verändern Sie die folgende Stilen:
Achten Sie bitte darauf, dass es derselbe Breitenwert von .container und .slides div Stilen steht.