# 037 - Manipolazione del colore - Trucchi CSS

Anonim

Ai tempi in cui stavamo cercando di dare le capacità CMS al cursore della home page, abbiamo assegnato un campo personalizzato a ciascuna diapositiva della homepage un selettore di colori. Questo ci dà accesso a quel colore ovunque ne abbiamo bisogno. Nel modello, avvolgeremo ogni diapositiva in una con un data-*attributo in cui inseriremo quel valore di colore per gentile concessione dell'API di Advanced Custom Field.

 

Royal Slider ci offre anche un evento che si attiva quando la diapositiva cambia. Quindi ora possiamo prendere il colore "attualmente attivo" per quella diapositiva quando ne abbiamo bisogno:

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

Potremmo prendere quel colore e applicarlo agli elementi in qualsiasi modo desideriamo con jQuery. Facciamo un ulteriore passo avanti e schiariamo / scuriamo il colore e poi lo applichiamo intorno.