CSS pur, curseur simple.
Voici quelques exemples:
(tested only on 30)(tested only on 24)9 Pas de transitions10+ fonctionne parfaitement(tested only on 12) Incluez la feuille de styles CSS à la fin de l'élément <head> :
< link rel =" stylesheet " href =" /path/to/csslider.css " />Mettez le code dans la page Web:
< 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 que vous pouvez générer à partir du fichier de modèle jade ici
La configuration par défaut peut être définie dans moins de fichiers.
Si vous souhaitez modifier la configuration pour un élément spécifique, vous devez remplacer la configuration par défaut. Par exemple, si vous avez un élément avec ID #my-slider et que vous souhaitez changer:
# my-slider . arrows label {
border-left-color : red;
border-right-color : red;
} # my-slider . inside . navigation label {
border : 1 px solid red;
}
