Reines CSS, einfacher Schieberegler.
Hier sind einige Beispiele:
(tested only on 30)(tested only on 24)9 Keine Übergänge10+ funktioniert perfekt(tested only on 12) Fügen Sie das CSS -Stylesheet am Ende des <head> -Elements hinzu:
< link rel =" stylesheet " href =" /path/to/csslider.css " />Code in die Webseite eingeben:
< div class =" csslider " >
< input type =" radio " name =" slides " id =" slides_1 " checked />
< input type =" radio " name =" slides " id =" slides_2 " />
< input type =" radio " name =" slides " id =" slides_3 " />
< input type =" radio " name =" slides " id =" slides_4 " />
< input type =" radio " name =" slides " id =" slides_N " />
< ul >
< li > Content of slide 1 </ li >
< li > Content of slide 2 </ li >
< li > Content of slide 3 </ li >
< li > Content of slide 4 </ li >
< li > Content of slide N </ li >
</ ul >
< div class =" arrows " >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
< label for =" slides_1 " class =" goto-first " > </ label >
< label for =" slides_N " class =" goto-last " > </ label >
</ div >
< div class =" navigation " >
< div >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
</ div >
</ div >
</ div >Code können Sie hier aus der Jade -Vorlagendatei generieren
Die Standardkonfiguration kann in weniger Datei festgelegt werden.
Wenn Sie die Konfiguration für ein bestimmtes Element ändern möchten, müssen Sie die Standardkonfiguration überschreiben. Zum Beispiel, wenn Sie ein Element mit ID #my-slider haben und sich ändern möchten:
# my-slider . arrows label {
border-left-color : red;
border-right-color : red;
} # my-slider . inside . navigation label {
border : 1 px solid red;
}
