Estoy tratando de hacer un carrusel como se aprecia en esta imagen:
Mi código actual es este:
<div class="container" id="contenedor-global">
<div class="d-flex justify-content-center align-items-center">
<div class="d-flex align-items-center justify-content-center"> <div> <span class="text-hot"> <b>HOT</b> </span> </div> </div> <div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center"> <div class="text-hot align-middle"> list </div> </div>
</div>
<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">×</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">×</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">×</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">×</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">×</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">×</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>
El código es demasiado repetitivo, así que debe haber una manera de tener un solo contenedor y con javascript generar los demas o con bootstrap hacerlo de una manera mas facil, pero estoy empezando recientemente con angular y bootstrap y al menos en la documentación de bootstrap no encuentro algo parecido.
También tengo un modal que se muestra al hacer clic en cada botón (ver detalles) de los artículos.
Finalmente, lo que me gustaría mejorar es el código del Slider, en la documentación de Bootstrap veo que solo explican hacerlo con una sola imagen, también intenté usar NGX-BOOTSTRAP y no logré que funcionara aunque instalé todas las dependencias como Popper.js, javascript, JQuery y bootstrap.
¿Alguien sería tan amable de echarme una mano con el código u orientarme en como podria mejorarlo? Me sería de gran aydua.
Gracias por adelantado. ¡Saludos!