Не знаю, актуально ли еще, но вот как вариант решения:
Делаем страницу обычной бутстраповской каруселью, выставляем ей необходимый тайминг и добавляем примерно вот такой скрипт. Он работает по такой логике: каждой картинке присвоен свой цвет, соответственно анимированно должен меняться бэкграунд подходящий именно той картинке, которая будет отображена.
Для наглядности, вот так это все выглядит (осторожно, гифка тяжелая):
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');
};
});
По аналогии можно сделать и то, что необходимо вам.
