背景图像上的Bootstrap Carousel

Question

我试图在包含iPhone线框的背景图像的div（内容左侧）内制作引导轮播（BS4）功能。这样，图像在iPhone线框内滑动，说明它在实际设备上的工作方式。我可以在没有轮播的情况下成功显示背景图像，但不能没有轮播。关于我需要改变什么的想法？

绿色线框就是我想在后台显示的内容。旋转木马应该改变灰色框中的图像。

HTML：

    .content-left {
      float: left;
      height:496px;
      width: 260px;
      background-image: url(/images/iPhoneX_wireframe-260x496.jpg);
       -o-background-size: cover;
      -moz-background-size: cover;
      -webkit-background-size: cover;
    
    }

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content-left">

            <!-- Carousel
            ================================================== -->
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                <li data-target="#myCarousel" data-slide-to="3" class=""></li>
                <li data-target="#myCarousel" data-slide-to="4" class=""></li>
                <li data-target="#myCarousel" data-slide-to="5" class=""></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <img class="first-slide" src="/images/track_your_hunts.png" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="second-slide" src="/images/Where_is_your_team.png" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="third-slide" src="/images/Compare_with_friends.png" alt="Third slide">
                </div>
                <div class="carousel-item">
                  <img class="fourth-slide" src="/images/Offline_maps.png" alt="Forth slide">
                </div>
                <div class="carousel-item">
                  <img class="fifth-slide" src="/images/Hunting_quota.png" alt="Fifth slide">
                </div>
                <div class="carousel-item">
                  <img class="sixth-slide" src="/images/Analyse_hunts.png" alt="Sixth slide">
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
          </div>