Back when we were messing with giving CMS abilities to the homepage slider, we gave a custom field to each homepage slide a color picker. That gives us access to that color wherever we need it. In the template, we'll wrap each slide in a <div> with a data-* attribute where we plunk that color value courtesy of Advanced Custom Field's API.

<div class="rsContent" data-main-color="<?php the_field('color'); ?>">
  <a data-value="hi" class="rsImg" href="<?php echo $slideImage[url]; ?>"></a>

Royal Slider also gives us an event that fires when the slide changes. So now we can grab the "currently active" color for that slide when we need it:

slider.ev.on('rsAfterSlideChange', function(event) {

  var mainColor = $(".rsActiveSlide")

  // Do stuff with the color!


We could take that color and apply it to elements in any way we want with jQuery. We take it a step further and lighten/darken the color and then apply it around.


  1. User Avatar
    Permalink to comment#

    This is such a nice subtle effect! Makes a difference.

  2. User Avatar
    Permalink to comment#

    Ah! This addresses my first question mentioned in my #40 comment. I should have read the show notes rather than just look for it in the video, but still… would have made a nice screencast too :)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.