# 037 - Manipulação de cores - CSS-Tricks

Anonim

Na época em que estávamos tentando fornecer habilidades de CMS para o controle deslizante da página inicial, demos um campo personalizado para cada slide da página inicial um seletor de cores. Isso nos dá acesso a essa cor sempre que precisarmos. No modelo, envolveremos cada slide em um com um data-*atributo em que inserimos o valor da cor como cortesia da API do Advanced Custom Field.

 

Royal Slider também nos dá um evento que dispara quando o slide muda. Agora podemos pegar a cor "atualmente ativa" para esse slide quando precisarmos:

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

Podemos pegar essa cor e aplicá-la aos elementos da maneira que quisermos com jQuery. Nós damos um passo adiante e clareamos / escurecemos a cor e então aplicamos ao redor.