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>
</div>

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")
    .find(".rsContent")
    .data("main-color");

  // 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.

Comments

  1. Wade
    Permalink to comment#

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

  2. G-man!
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.