我怎么能使用bootstraps carousel插件来创建动态轮播

Question

您好我已经创建了一个可以工作的旋转木马但是没有像我之前使用过的自举旋转木马那样光滑。我这次没有使用过这个插件的原因是因为我的轮播中的数据是动态的。在我的foreach循环中，类'active'是一个bootstrap类，它显示与该类关联的div。使用我的代码，我怎么能让我的旋转木马像这样工作：https://codepen.io/mephysto/pen/ZYVKRY

$( document ).ready(function() {
    $('.carosuelProperties').each(function() {
        var current = $(this);
        var image = current.find('img');
        current.css('background-image', 'url(' + image.attr('src') + ')');
    });
    $('.item:nth-child(1), .item:nth-child(2), .item:nth-child(3)').addClass('active');
});

$slides.on('mouseenter', _.debounce(function() {
}, 350));


$('#myCarousel').carousel({
  interval: 40000
});

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

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

        <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
          <div class="carousel-inner">
              @if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
                @foreach ($participatingProperties as $property)
                <a href="/view/property/{{ $property->property_slug or $property->id }}">  
                  <div class="carousel__box itemProperties col-md-4 col-sm-12 item">
                    <h2 class="propertyTitleCaro centered white sub-header">
                        <?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>   
                    </h2>
                    <p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
                    <div class="carosuelProperties" id="{{ $property->id }}">
                        <img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
                    </div>
                    </a>
                </div>
                @endforeach
                @endif
            </div>
          <a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-3x"></i></a>
          <a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-3x"></i></a>
        </div>


.caroImgClass {
  display: none;
}

.arrowOf {
    color: #008692;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin-top: -25px;
}

.arrowOf:hover {
    color: #000000;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.itemProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
  background-color: #008692;
}

.carosuelProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
    top: 0px;
  left: 0px;
  position: absolute;
  transition: .5s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carosuelProperties:hover {
    opacity: 0;
    transition: .5s ease-in-out;
}

@media only screen and (min-width: 1900px) {
.propertyTitleCaro {
    padding: 1vw;
    padding-bottom: 0;
    font-size: 1.5rem;
    font-weight: 1000;
    margin-top: 1.5vw;
}}

@media only screen and (max-width: 1900px) {
.propertyTitleCaro {
    font-size: 1.5rem;
    font-weight: 1000;
    margin-top: 3vw;
    padding: 10%;
    padding-bottom: 0%;
}}

.propertyDesCaro {
    padding: 1.5vw;
    padding-top: 0px;
}

$carousel-visible-count: 3;

@mixin clearfix() {
  &:before,
  &:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
  }
  &:after { clear: both; } 
}

* {
  box-sizing: border-box;
}

.carousel__control {
  position: absolute;
  top: 25%;
  bottom: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  outline: 0;
  background: none;
}

.carousel-control {
  background: none!important;
  padding-top: 10%;
}

.carousel-control.left {
    margin-left: -155px;
}

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}