如何使用引导程序以尽可能少的代码制作多项目轮播？

Question

我正在尝试像这样的图像制作旋转木马：

carousel-multi-ítem

Estoy trabajando con Angular y Bootstrap，estoy comenzando con ambas框架，el elcódigoque 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，甚至都无法使其正常工作尽管我将所有依赖项都安装为Popper。 js，javascript，jquery和Bootstrap。有人会这样帮助我吗？我将不胜感激。提前致谢。问候！