À étudier : un « slider » animé qui fonctionne directement en #CSS, sans nécessiter javascript :
▻http://cssslider.com/fr/bootstrap-slider-10.html
Ce que j’ai compris :
– il y a, en début de slider, des checkbox cachées (une par slide) ;
– les boutons de navigation (les flèches et les bullets) sont, en réalité, des labels correspondant à chacune de ces checkbox ; du coup, quand on clique sur un bouton de navigation, en fait on provoque le passage de la checkbox correspondante à l’état « checked » ;
– cela fait, dans les styles, puisque les checkbox précèdent le slider, il suffit de styler, par exemple :
#checkbox1:checked ~ .element_a_styler
c’est-à-dire un
element_a_styler
qui se trouve après la checkbox numéro 1 à l’état checked
(ce qui est donc provoqué, sans javascript, par le simple fait que les boutons de navigation sont des labels correspondants à ces checkbox, comme dans un formulaire tout bête).Normalement, il devrait y avoir un très bon support, la difficulté étant IE8 qui ne comprend pas le sélecteur :checked
.