Bootstrap Carousel在上一张幻灯片上重叠

Question

我正在完成Bootstrap Carousel，但遇到一些问题，当按上一个箭头时，幻灯片会相互重叠，但是当我单击下一步时，它们会很好地工作。

正在加载：

在prevoius按钮转换时：

当我单击向右箭头时，一切正常，但是当我单击上一个箭头时，它重叠在另一张幻灯片的顶部，然后就位。

代码：

$('#myCarousel').carousel({
  interval: 10000,
  interval: false
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
});

.bottomFarLeftBox {
	background-color: #4B92DB;
	height: 170px;
	width: 300px;
}
.bottomMidLeftBox {
	background-color: #4B92DB;
  margin-right: 0px!important;
	height: 170px;
	width: 300px;
}
#innerBoxHeadings {
	color: white!important; 
	text-align: center; 
	padding-top: 5px;
}
#innerBoxText {
	color: white; 
	margin: auto; 
	text-align: center; 
	padding-left: 20px;
	padding-right: 20px;
}
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev        { left: -50%; }

.carousel.slide img {
 	width:100%;
 	height:auto;
 }
 .carousel img {
 	border-radius: 0px;
 }
 .carousel-control.left {
 	background: none;
 	border: none;
 	position: absolute;
 	top: 55%;
 	left: -35px;
 }
 
 .carousel-control.right {
	position: absolute;
	top: 55%;
	right: -35px;
	background: none;
	border: none;
}
 
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img{
 	width: 70%;
 	height: 200px;
 	margin: auto;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
<div class="col-sm-8">
   <h4>Latest Training Documentation</h4>
   <hr style="margin-top: 10px;"/>
   <div class="row">
      <div class="col-md-12">
         <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
               <div class="item active">
                  <div class="col-md-6 col-centered">
                     <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
                        <div class="bottomFarLeftBox">
                           <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;"/>OneDrive</h2>
                           <p id="innerBoxText">Store files in one place, share them with 
                              others, and get to them from any device connected to the internet.
                           </p>
                        </div>
                     </a>
                  </div>
               </div>
               <div class="item">
                  <div class="col-md-6 col-centered">
                     <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
                        <div class="bottomMidLeftBox">
                           <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
                           <p id="innerBoxText">It&#39;s more than your employee profile! Get 
                              personal insights and relevant information based on who you work 
                              with and the content you work on.
                           </p>
                        </div>
                     </a>
                  </div>
               </div>
               <div class="item">
                  <div class="col-md-6">
                     <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
                        <div class="bottomFarLeftBox">
                           <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;"/>OneDrive</h2>
                           <p id="innerBoxText">Store files in one place, share them with 
                              others, and get to them from any device connected to the internet.
                           </p>
                        </div>
                     </a>
                  </div>
               </div>
               <div class="item">
                  <div class="col-md-6 col-centered">
                     <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
                        <div class="bottomMidLeftBox">
                           <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
                           <p id="innerBoxText">It&#39;s more than your employee profile! Get 
                              personal insights and relevant information based on who you work 
                              with and the content you work on.
                           </p>
                        </div>
                     </a>
                  </div>
               </div>
            </div>
         </div>
        </div>
      </div>
   <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
   <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>    
</div>
      
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>