# 037 - Manipulation des couleurs - Astuces CSS

À l'époque où nous essayions de donner des capacités CMS au curseur de la page d'accueil, nous donnions un champ personnalisé à chaque diapositive de page d'accueil un sélecteur de couleur. Cela nous donne accès à cette couleur partout où nous en avons besoin. Dans le modèle, nous allons envelopper chaque diapositive dans un avec un data-*attribut où nous enregistrons cette valeur de couleur grâce à l'API Advanced Custom Field.

Royal Slider nous donne également un événement qui se déclenche lorsque la diapositive change. Nous pouvons maintenant saisir la couleur «actuellement active» de cette diapositive lorsque nous en avons besoin:

slider.ev.on('rsAfterSlideChange', function(event) ( var mainColor = $(".rsActiveSlide") .find(".rsContent") .data("main-color"); // Do stuff with the color! ));

Nous pourrions prendre cette couleur et l'appliquer aux éléments de la manière que nous voulons avec jQuery. Nous allons plus loin et éclaircissons / assombrissons la couleur, puis l'appliquons autour.