JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-8 carousel slide" id="banner" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item banner-bg-1 active">
      <div class="col-md-offset-7 col-md-5">
        <div class="banner-texto">
          <h1>orange/laranja</h1>
        </div>
      </div>
    </div>
    <div class="item banner-bg-2">
      <div class="col-md-offset-7 col-md-5">
        <div class="banner-text">
          <h1>grey/cinza</h1>
        </div>
      </div>
    </div>
    <ol class="carousel-indicators">
      <li data-target="#banner" data-slide-to="0" class="banner-li-1 active"></li>
      <li data-target="#banner" data-slide-to="1" class="banner-li-2"></li>
    </ol>
  </div>
</div>

CSS

body{
  background:red;
}
.carousel-inner{
  height:250px;
}
.carousel-indicators {
    text-align: center;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
}

JavaScript

$(document).ready(function() {
	mudaBG();
});

$('#banner').on('slide.bs.carousel', function (ev) {
 	mudaBG();
});

function mudaBG(){
    if($('.banner-bg-1').hasClass('active')){
	    $('body').css("background","orange");
    }else if($('.banner-bg-2').hasClass('active')){
	    $('body').css("background","grey");
	}
};