Bootstrap 4, карусель jQuery не работает должным образом

Question

благодаря этому вопросу Мне удалось сделать карусель нескольких элементов отзывчивой и применить свой собственный стиль (красная граница).

К сожалению, это нарушило код jQuery, отвечающий за автоматическое скольжение.

Мои навыки jQuery / JS пока недостаточны для решения этой проблемы.

Не могли бы вы мне помочь?

$('#recipeCarousel').carousel({
  interval: 3000
})

$('.carousel .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));
  }
});

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.carousel-control-prev,
.carousel-control-next {
  margin-left: -8em;
  margin-right: -8em;
  opacity: 1!important;
}

#arrowcolorL {
  color: #d3232e;
  font-size: 3em;
  opacity: 1!important;
}

#arrowcolorR {
  color: #d3232e;
  font-size: 3em;
  opacity: 1!important;
}

.round-container {
  display: inline-block;
  margin: 10px;
}

.mystyle {
  border: 1px solid #d3232e;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="recipeCarousel" class="carousel w-100 " data-ride="carousel">
  <div class="carousel-inner text-center w-100" role="listbox" style="padding: 0 10em;">
    <div class="carousel-item d-flex row active">
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
    </div>
    <div class="carousel-item d-flex row active">
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
    </div>
    <div class="carousel-item d-flex row active">
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
      <div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
    </div>
    <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
      <i class="fa fa-angle-left" aria-hidden="true" id="arrowcolorL"></i>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
      <i class="fa fa-angle-right" aria-hidden="true" id="arrowcolorR"></i>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Это скриншот ломаного макета

и на следующем снимке экрана Я бы хотел получить (конечно, с правильной границей)

Спасибо за любую помощь, которую вы можете оказать!