多个bootstrap 4轮播仅更改第一张幻灯片

Question

我有3个旋转木马使用这个，当我点击下一个只有第一个旋转木马工作，即使我点击下一个或上一个第二个旋转木马它只滑动第一张幻灯片。请帮忙

<div class="img-container" >
   <div class="mem-carousel carousel slide" data-ride="carousel" >
      <div class="carousel-inner" >
         <div class="carousel-item" ng-class="{active:!$index}" ng-repeat="img in space.images">
            <img ng-src="{{img}}" style="width:400px; height: 200px;">
         </div>
         <div class="favorite-block price">
            <span class="price-text-left"><font><font>Rs {{space.hourly_rate}}</font></font></span>
            <span class="price-text-right">
               <div><font><font>per</font></font></div>
               <div><font><font>hour</font></font></div>
            </span>
         </div>
         <a class="carousel-control-prev" href=".mem-carousel"  role="button" data-slide="prev">
             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
             <span class="sr-only">Previous</span>
         </a>
         <a class="carousel-control-next" href=".mem-carousel" role="button" data-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
             <span class="sr-only">Next</span>
         </a>      
      </div>
   </div>
</div>