Как я могу сделать карусель из нескольких элементов, используя загрузчик с минимальным количеством кода?

Question

Я пытаюсь создать карусель, подобную этой:

carousel-multi-ítem

Estoy trabajando con Angular y Bootstrap, estoy comenzando con ambas frameworksy el código que tengo hasta ahora es este:

<div class="container" id="contenedor-global">


<div *ngIf="inmuebles!=null; else espera">
  <div class="carousel slide " data-ride="carousel" data-interval="false" id="multi_item">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="row">
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i].id}}_{{inmuebles[i].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>

              <div class="card-body ">
                <div class="">
                  <i class="fas fa-cart-plus "></i> <h6 class="d-inline-flex ml-2" >Precio: {{inmuebles[i].precio}}</h6>
                </div>
                <div class="">
                  <i class="fas fa-map-marker-alt"></i> <h6 class="d-inline-flex ml-2">Ubicacion</h6>
                </div>
                <div class="">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
                </div>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i+1].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+1].id}}_{{inmuebles[i+1].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>
              <div class="card-body">
                <div class="d-inline-flex">
                  <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+1].precio}}</h6>
                </div>
                <div class="d-inline-flex">
                  <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
                </div>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+2].id}}_{{inmuebles[i+2].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>
              <div class="card-body">
                <div class="d-inline-flex">
                  <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+2].precio}}</h6>
                </div>
                <div class="d-inline-flex">
                  <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
                </div>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer ">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="carousel-item">
        <div class="row">
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i+3].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+3].id}}_{{inmuebles[i+3].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>
              <div class="card-body">
                <div class="d-inline-flex">
                  <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+3].precio}}</h6>
                </div>
                <div class="d-inline-flex">
                  <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
                </div>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i+4].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+4].id}}_{{inmuebles[i+4].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>
              <div class="card-body">
                <div class="d-inline-flex">
                  <h6>Precio: {{inmuebles[i+4].precio}}</h6>
                </div>
                <div class="d-inline-flex">
                  <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
                </div>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem;">
              <div class="" *ngIf="inmuebles[i+5].fotos[0]!=''; else sino">
                  <img class="card-img-top" id="imgPortada" src="{{url}}{{inmuebles[i+5].id}}_{{inmuebles[i+5].fotos[0]}}" alt="Card image cap">
              </div>
              <ng-template #sino>
                <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">
              </ng-template>
              <div class="card-body">
                <div class="d-inline-flex">
                  <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+5].precio}}</h6>
                </div>
                <div class="d-inline-flex">
                  <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>
                </div>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                          <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>
                          <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="text-center">Categoría</th>
                          <th scope="col" class="text-center">Fecha de Publicación</th>
                          <th scope="col" class="text-center">Localización</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-center">Apartamentos</td>
                          <td class="text-center">15/02/19</td>
                          <td class="text-center">Valencia</td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="modal-footer ">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <a class="carousel-control-prev" (click)="anteriorInmueble()" href="#multi_item" 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" (click)="siguienteInmueble()" href="#multi_item" 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>
<ng-template #espera>Esperando datos...</ng-template>
</div>

Я знаю, что код слишком повторяется, я думаю, что должен быть способ иметь один контейнер и javascript для генерации других, но, как я уже сказал, я начинаюВ последнее время у меня также есть модальный режим, который отображается при нажатии на каждую кнопку (см. подробности) элементов, и я также вижу, что код для этого очень повторяется.Наконец, я хотел бы улучшить код Slider. В документации по Bootstrap я вижу, что они объясняют, как делать это только с одним изображением, я также пытался использовать NGX-BOOTSTRAP и мне не удалось заставить его работать дажехотя я установил все зависимости как поппер.js, javascript, jquery и Bootstrap.кто-то будет так любезен, чтобы протянуть мне руку?Буду весьма признателен за это.Заранее спасибо.Привет!