Question

I’m working on changing the color of an HTML block each time a slide switches over. I’m using RoyalSlider, and I have 5 colors that I would like to cycle through, in order.

My current effort looks like this:

    // initialize slider
    var sliderInstance = $('#new-royalslider-1').data('royalSlider');

    // bind the rsBeforeAnimStart event
    sliderInstance.ev.on('rsBeforeAnimStart', function() {

        var colors = ["#000000","#464646","#999999"];

        for(var i=0; i<colors.length; i++) {
          $(".color-block").css('background', colors[i]);
        }

    });

With this setup, I only get the #999999 value to come up instead of cycling through the array with each slide change. Here is the site that I’m working in, just for context.

Any idea what I’m doing wrong here? Thanks in advance for any help! I really appreciate it!

Answer 1

Using the index of the current slide, we can cycle through the colours upon the animation changing.

// initialize slider and define colours
var sliderInstance = $('#new-royalslider-1').data('royalSlider'),
    colors = ["#000000","#464646","#999999"];

// bind the rsBeforeAnimStart event
sliderInstance.ev.on('rsBeforeAnimStart', function() {
    $(".color-block").css('background', colors[sliderInstance.currSlideId % colors.length]);
});