Не знаю, актуально ли еще, но вот как вариант решения:
Делаем страницу обычной бутстраповской каруселью, выставляем ей необходимый тайминг и добавляем примерно вот такой скрипт. Он работает по такой логике: каждой картинке присвоен свой цвет, соответственно анимированно должен меняться бэкграунд подходящий именно той картинке, которая будет отображена.
Для наглядности, вот так это все выглядит (осторожно, гифка тяжелая): goo.gl/ZXCCHh
В css добавлена вот такая строчка:

.main-page { transition: background .8s linear;  }  /* для плавного перехода */

В HTML каждому контейнеру картинки добавлен data-атрибут с необходимым цветом:

<div class="item" data-color="red">
    <div>
        <img class=' header__images' src="img/main-page/slides/3.png">
    </div>
</div>

И сам скрипт:

$("#myCarousel").on('slide.bs.carousel', function (e) {
    var nextItem = $(e.relatedTarget); // считываем следующую картинку _перед_ тем как она появится.

    if($(nextItem).data('color') === 'green') {  // в зависимости от data-атрибута меняем цвет фона 
        $('.main-page').css('background', '#8de257'); 
   } 
    else if($(nextItem).data('color') === 'yellow') { // и далее все слайды по аналогии
        $('.main-page').css('background', '#f8cc00'); 
    } 
    else if ($(nextItem).data('color') === 'red') {
        $('.main-page').css('background', '#ff5a42'); 
    } 
    else if ($(nextItem).data('color') === 'blue'){
        $('.main-page').css('background', '#68d9fa'); 
    };
});

По аналогии можно сделать и то, что необходимо вам.