0

Estoy tratando de hacer un carrusel como se aprecia en esta imagen:

carousel multi-item

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">&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>

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!

4
  • A priori, se me ocurre que podrías almacenar los datos que muestras en el carrusel en algun objeto y hacerte una plantilla con el código que se repite, en base a eso podrías iterar y lo tendrías Commented el 7 jun. 2019 a las 12:16
  • pero haciendolo así me ahorraría tener 6 contenedores para los ítems? podrias mostrarme un ejemplo de la creación de los contenedores?
    – JulianProg
    Commented el 7 jun. 2019 a las 14:26
  • En mi opinión lo que podrías hacer es utilizar JavaScript o PHP para meter tu código repetido en un ciclo for o while y solo cambiar tu variable para identificar las imágenes enlace y contenido el carrusel Commented el 7 jun. 2019 a las 18:54
  • @DonaldoManzano el ciclo que mencionas lo usaría para crear los contenedores (items) del slider?
    – JulianProg
    Commented el 9 jun. 2019 a las 18:48

1 respuesta 1

0

Sé que la pregunta hace referencia a cómo hacerlo con menos código, y no usando una librería, pero está yo la he utilizado en varias ocasiones y tiene muy buen soporte y es muy fácil de usar. https://kenwheeler.github.io/slick/

Lo primero es importar la libreria a tu ìndex.html (Asegurate que tengas la libreria guardada en la misma ruta que pones en la referencia el link).

<link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling 
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

en tu archivo index.html agregamos el siguiente código.

<div class="your-class">  
    <div>your content</div>  
    <div>your content</div>  
    <div>your content</div>  
</div>
<script type="text/javascript">
    $(document).ready(function(){ 
        $('.your-class').slick(); 
    }); 
</script>

Y listo, ya tienes un slider muy con poco código.

1
  • Por favor lee Cómo responder, pues los aportes que son solo enlaces se considera de baja calidad
    – user128299
    Commented el 8 jun. 2019 a las 5:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.