How to display 3 Bootstrap Card titles in same row using forach loop

I have view where I need to display 3 card tiles in a same row. But at present it displays one after the other. How Do I display 3 card tiles in same row?

Index.cshtml –

@model List<JobPortal.Models.MyDB> @{    ViewBag.Title = "Current List"; }  <div class="row">  @foreach (var list in Model)  {         <div class="flexcontainer">           @Html.Partial("_MySharedView", list)        </div>  } </div> 

Shared view –

@model JobPortal.Models.MyDB @if (Model.JDetails.Count > 0) {      <div class="card" style="width: 18rem;">        <img class="card-img-top" src="..." alt="Card image cap">       <div class="card-body">       <p class="card-text">Model.details</p>      </div>   </div>  } 

MVC com PHP e BOOTSTRAP [pendente]

Estou iniciando os estudos em MVC. atualmente uso o PHP para isso. tenho uma rotina pequena de paginação de uma plataforma de cursos. ela utiliza o php. link: https://drive.google.com/file/d/1iz_JkRRBFWxzQIi-wM30dE7D0fIJTrST/view?usp=sharing

porem quando rodo o projeto, as funções nao funcionam. os links parecem não existir, nem os arquivos de estilização são carregados. uso o xampp e descompacto o projeto dentro do htdocs.

muito obrigado pelo auxilio.

How do I have one of the bootstrap pills active and checked by default so it shows the content?

I have a bootstrap pill menu with five buttons and separate content that shows on each one I want the first one to be checked and active by default. How do I do it? Thanks

    <div class="row align-items-center item-row packet-row">                    <ul class="nav nav-pills nav-stacked nav-justified nav-fill w-100 row flex-wrap">                         <li class="col nav-item active"><a data-toggle="tab" href="#wifi"><div class="innercol primary-color">KibrisOnline <br>WI-FI</div></a></li>                          <li class="col nav-item"><a data-toggle="tab" href="#adsl"><div class="innercol secondary-color">KibrisOnline <br>ADSL</div></a></li>                        <li class="col nav-item"><a data-toggle="tab" href="#vdsl"><div class="innercol tertiary-color">KibrisOnline <br> VDSL</div></a></li>                         <li class="col nav-item"><a data-toggle="tab" href="#dedicated"><div class="innercol quaternary-color">KibrisOnline <br> DEDICATED</div></a></li>                        <li class="col nav-item"><a data-toggle="tab" href="#simetrik"><div class="innercol quinary-color">KibrisOnline <br> SIMETRIK</div></a></li>                      </ul>                 </div>       

I want the first li to be checked by default and whichever li is pressed on to stay checked even when the page is refreshed.

Dynamic Bootstrap 4 modal using JavaScript OOP

I have created dynamic Bootstrap 4 modal using JavaScript OOP. Please verify and give your reviews how I can improve the code. I have passed four parameters to create a dynamic modal:

  1. openPopup class (for click)
  2. data-title (dynamic title)
  3. data-href (dynamic load html in modal)
  4. data-target (target id if i have multiple modal)
    class Modal{           constructor(id,url,title){              this.id = id;              this.url = url;              this.title = title;          }         }         class UI{              static addModal(){              $  ('body').on('click', '.openPopup', function(e) {              const id = $  (this).attr('data-target'),              url = $  (this).attr('data-href'),              title = $  (this).attr('data-title')              const modal = new Modal(id, url, title);              console.log(modal)              if($  ('#'+ modal.id).length){               $  ('#'+ modal.id).modal({show:true});              }             else{             let html = `            <div class="modal fade" id="$  {modal.id}" tabindex="-1"         role="dialog">           <div class="modal-dialog modal-dialog-centered" role="document">         <div class="modal-content">           <div class="modal-header">             <h5 class="modal-title" id="exampleModalLongTitle">$  {modal.title}             </h5>           <button type="button" class="close" data-dismiss="modal" aria-              label="Close">               <span aria-hidden="true">&times;</span>             </button>           </div>           <div id="$  {modal.id}body" class="modal-body">           </div>           <div class="modal-footer">             <button type="button" class="btn btn-secondary" data-                  dismiss="modal">Close</button>             <button type="button" id="save" class="btn btn-primary">Save         changes</button>           </div>         </div>         </div>          </div>`;         $  ('body').append(html);         $  ('#'+ modal.id + 'body').load(modal.url,function(){        $  ('#'+ modal.id).modal({show:true});        });          }        })        }}         class ModalApp{            static init(){              console.log('App Started...');             UI.addModal()             }         }         ModalApp.init();
   <button type="button" class="btn btn-primary openPopup"  data-title="Test    about" data-href="partial/about.html" data-toggle="modal" data-    target="myModal1">     Launch demo about    </button>

See the fiddle below

JSfiddle

Add animation/fade to modal/dialogue box (without using the bootstrap)

The current state of a modal/dialog opening in Drupal 8 (and 7 for that matter) is pretty clunky from a user experience perspect. Leveraging some type of animation/fade would really enhance the elegance + cohesiveness of the modal. I notice bootstrap allows a “fade” class on the modal, which gives it a fade effect (I assume). Is there a way to add this type (or any type) of animation to a Drupal 8 modal without needing bootstrap? Am I missing something simple?

Edit: Thanks for quick replies and patience with a newbie. So I’m opening a node/add form into a modal with a link like so..

<a class="use-ajax" data-dialog-options="{&quot;width&quot;:800}" data-dialog-type="modal" href="/node/add/article">Add Article</a> 

I’d like the modal to open/close with a fade effect (or slide in, etc). Is there a way to leverage JS, CSS or Drupal itself to create this animation?

Is there a better solution all together to displaying a node/add form in a popup/lightbox type element with ajax?

Thank you!

como podria colocar un slider dentro de otro slider usando bootstrap?

Estoy usando bootstrap y angular, voy poco a poco tratando de resolver cada problema. ahorita estoy tratando de usar un carusel dentro de un modal y este modal esta dentro de otro carusel. el problema es que cuando inserto el carusel dentro del modal el primer carusel que esta fuera (el general por decirlo así) se descontrola, cuando hago click para pasar al siguiente item se desaparecen las imagenes. le cambie los id a los caruseles para que no generarn conflicto y el problema sigue, que pudiera ser? aquí esta el codigo del carusel general:

<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[z].fotos[0]!=''; else sino">                   <!-- <h1>{{inmuebles[z].nombre}}</h1> -->                    <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{inmuebles[z].id}}_{{inmuebles[z].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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>                </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">               <div class="" *ngIf="inmuebles[z+1].fotos[0]!=''; else sino">                   <!-- <h1>{{inmuebles[z+1].nombre}}</h1> -->                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{inmuebles[z+1].id}}_{{inmuebles[z+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>               <h1>{{inmuebles[z+1].fotos[0]}}</h1>               <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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+2].fotos[0]!=''; else sino">                 <!-- <h1>{{inmuebles[z+2].nombre}}</h1> -->                    <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{inmuebles[z+2].id}}_{{inmuebles[z+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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>               </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[z+3].fotos[0]!=''; else sino">                 <!-- <h1>{{inmuebles[z+3].nombre}}</h1> -->                    <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{inmuebles[z+3].id}}_{{inmuebles[z+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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>                </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+4].fotos[0]!=''; else sino">                 <!-- <h1>{{inmuebles[z+4].nombre}}</h1> -->                    <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{inmuebles[z+4].id}}_{{inmuebles[z+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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+5].fotos[0]!=''; else sino">                 <!-- <h1>{{inmuebles[z+5].nombre}}</h1> -->                    <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271419/como-podria-colocar-un-slider-dentro-de-otro-slider-usando-bootstrap}{{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 -->               <app-modal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>               </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>

y este es el modal donde tengo el otro carusel:

  <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 id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">         <div class="carousel-inner">           <div class="carousel-item active">             <img class="d-block w-100" src="..." alt="First slide">           </div>           <div class="carousel-item">             <img class="d-block w-100" src="..." alt="Second slide">           </div>           <div class="carousel-item">             <img class="d-block w-100" src="..." alt="Third slide">           </div>         </div>       </div>        <div class="" id="cont-descripcion">         <p class="text-center">Descripcion</p>       </div>        <table class="table">         <tbody>           <tr>             <td class="text-center"> <i class="fas fa-bath fa-2x "></i> <p> Baños: 1 <p> </td>             <td class="text-center"> <i class="fas fa-bed fa-2x"></i> <p> Recamaras: 2 <p> </td>             <td class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br/> 100</td>           </tr>         </tbody>       </table>       <div class="modal-footer">         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>       </div>     </div>   </div>

problema con slider multi item en bootstrap y angular

tengo un carousel multi-item de 3 item por vez, cuando hago click en el boton siguiente o anterior se muestran otros 3 nuevos items y así sucesivamente. el problema que tengo ahorita es que estoy haciendo binding entre el .ts y el .html para poder obtener el valor de la variable Z que modifico cada vez que hago click en el Next o en el Previous ya que esa variable Z la uitlizo como indice de un vector donde tengo alamacenadas las imagenes que muestro en el slider. por eso hago referencia a z , z+1 y z+2 para las 3 primeras imagenes y luego z+3, z+4 y z+5 para las siguientes 3 imagenes cuando se hace click en el boton previous. el gran problema que estoy viendo es que cuando hago click en el boton siguiente, la variable Z se modifica obviamente y todo se me vuelve un desastre xq los valores se mezclan. Como podría mejorar esto? se que ese slider tiene demasido código repetitivo pero intente hacerlo con algunos frameworks ya que con bootstrap no se puede originalmente y no logre hacerlo funcionar. aquí dejo el código que tengo:

<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[z].fotos[0]!=''; else sino">                   <h1>{{z}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z].id}}_{{inmuebles[z].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z}}</h1>                 <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[z+1].fotos[0]!=''; else sino">                   <h1>{{z+1}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+1].id}}_{{inmuebles[z+1].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+1}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>               <h1>{{inmuebles[z+1].fotos[0]}}</h1>               <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[z+2].fotos[0]!=''; else sino">                 <h1>{{z+2}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+2].id}}_{{inmuebles[z+2].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+2}}</h1>                 <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[z+3].fotos[0]!=''; else sino">                 <h1>{{z+3}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+3].id}}_{{inmuebles[z+3].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+3}}</h1>                 <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[z+4].fotos[0]!=''; else sino">                 <h1>{{z+4}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+4].id}}_{{inmuebles[z+4].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+4}}</h1>                 <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[z+5].fotos[0]!=''; else sino">                 <h1>{{z+5}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+5].id}}_{{inmuebles[z+5].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+5}}</h1>                 <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>

Aquí es donde incremento los valores de la variable Z, la incremento o decremento de 5 en 5 porque esa es la cantidad de posiciones en la que debo moverme en el vector de las fotos para poder rotar el carousel.

    anteriorInmueble(){       (this.z<=0)? this.z=680: this.z=this.z-5;     }       siguienteInmueble(){       (this.z>=680)? this.z=0: this.z=this.z+5;     }