JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="bg-image">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.hdwallpapers.in/walls/tree_beach_side-wide.jpg" alt="...">
          <div class="carousel-caption">
            First slide label
          </div>
        </div>
        <div class="item">
          <img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
          <div class="carousel-caption">
            Second slide label
          </div>
        </div>
      </div>
    
    </div>
  </div>

CSS

.bg-image{
       width: 230px;
    height: 443px;
    background-image: url(http://www.freeiconspng.com/uploads/phone-png-18.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 53px 13px;
}
.carousel-inner>.item>a>img, 
.carousel-inner>.item>img{
     height: 222px;   
}

.carousel, .carousel .item, 
.carousel-inner, .carousel-inner>.item>a>img,
.carousel-inner>.item>img {
      height: 100% !important;
      object-fit: cover;
}

JavaScript

$('.carousel').carousel();