Personaliza el carrusel NG Bootstrap en Angular

6 minutos de lectura

photo
kontenurbano

Tengo un carrusel ng-bootstrap en mi proyecto Angular y me gustaría cambiar algunas cosas, pero no sé cómo hacerlo.

Primero, me gustaría tener un efecto de desvanecimiento cuando cambia la diapositiva, en el momento en que aparece la siguiente imagen.

En segundo lugar, ¡quiero tener mis propias flechas e indicador deslizante o cambiar el estilo! Intenté hacerlo a través de CSS, pero ninguno de mis códigos parece ser aceptado.

Debajo de mi componente de presentación de diapositivas:

  images = [1, 2, 3, 4, 5, 6, 7].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @ViewChild('carousel', {static : true}) carousel: NgbCarousel;

  togglePaused() {
    if (this.paused) {
      this.carousel.cycle();
    } else {
      this.carousel.pause();
    }
    this.paused = !this.paused;
  }

  onSlide(slideEvent: NgbSlideEvent) {
    if (this.unpauseOnArrow && slideEvent.paused &&
      (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
      this.togglePaused();
    }
    if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
      this.togglePaused();
    }
  }

presentación de diapositivas-componente html

<ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide *ngFor="let img of images; index as i">
      <div class="picsum-img-wrapper">
        <img [src]="img" alt="My image {{i + 1}} description">
      </div>
  </ng-template>
</ngb-carousel>

presentación de diapositivas-componente css

.picsum-img-wrapper {
	img {
		width: 100vw;
		height: 100vh;
		max-width: 100%;
		display: block;
		margin: 0;
	}
}

.carousel-indicators > li {
	visibility: hidden;
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

a.carousel-control-prev,
a.carousel-control-next {
	span {
		display: none;
	}
}

Personaliza el carrusel NG Bootstrap en Angular
Eliseo

necesita usar encapsulación: ViewEncapsulation.None

Esto le permite anular el css. En ngb-carousel, la clase que controla los elementos es .carousel-item y carousel-item.active. carousel-item tiene display:none y carousel-item.active tiene display:block, por lo que necesita cambiar por opacity:0 y opacity:1. Usa el propio .css para hacer la transición. Algo como

@Component({selector: 'ngbd-carousel-basic', 
templateUrl: './carousel-basic.html',
encapsulation: ViewEncapsulation.None,
styles:[`
  .carousel-item
  {
    display:block;
    opacity:0;
    transition: opacity 2s;
  }
  .carousel-item.active
  {
    display:block;
    opacity:1;
    transition: opacity 2s;

  }
  .carousel-control-next-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");

}  .carousel-control-prev-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");

}
`]
}
)

(ver stackblitz Actualizado

Si desea hacer la animación en "Estilo angular", también debe anular la clase[`
  .carousel-item
  {
    display:block;
  }
  .carousel-caption
  {
    display:block
  }

And create an animation like

animations: [
    trigger('simpleFadeAnimation', [
      state('false', style({opacity: 0})),
      transition('*=>false', [
        style({opacity: 1}),
        animate(600 )
      ]estilos:

), transición (‘falso => ​​*’, animación (600, estilo ({opacidad: 1}))) ]) ]

<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true" >
  <ng-template ngbSlide id="id1">
    <div  class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id1'">
      <img [src]="images[0]" width="100%" alt="Random first slide">
    <div class="carousel-caption" >
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id2">
    <div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id2'">
      <img [src]="images[1]" width="100%" alt="Random second slide">
    <div class="carousel-caption" >
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id3">
    <div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id3'">
      <img [src]="images[2]" width="100%" alt="Random third slide">
    <div class="carousel-caption" >
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
    </div>
  </ng-template>
</ngb-carousel>

El .html parece ver el

nuevo stackblitz Actualizado 2

  animations: [
    trigger('simpleTranslation', [
      state('outright', style({ transform: `translateX(100%)` })),
      state('outleft', style({ transform: `translateX(-100%)` })),
      state('inleft', style({ transform: `translateX(0)` })),
      state('inright', style({ transform: `translateX(0)` })),
      transition('*=>inleft',[
        style({transform:`translateX(-100%)`}),
        animate('260ms ease-in')
      ]),
      transition('*=>inright',[
        style({transform:`translateX(100%)`}),
        animate('260ms ease-in')
      ]),
      transition('*=>outright', [
        animate('260ms ease-in', style({ transform: `translateX(-100%)` }))
      ]),
      transition('*=>outleft', [
        animate('260ms ease-in',style({ transform: `translateX(100%)` }))
      ]),
    ])
  ]

si queremos que las diapositivas vayan de izquierda a derecha, podemos usar una animación como

  @ViewChildren(NgbSlide) slides: QueryList<NgbSlide>
  slideControl: any[] = []
  onSlide(event) {
    this.slides.forEach((x, index) => {
      if (x.id == event.current) {
        this.slideControl[index] = 'in' + event.direction
      }
      if (x.id == event.prev) {
        this.slideControl[index] = 'out' + event.direction
      }
    })
  }

donde necesitamos obtener las diapositivas a la vista de los niños y usar el evento de diapositivas

<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true"  (slide)=onSlide($event)>
  <ng-template ngbSlide id="id1">
    <div  class="picsum-img-wrapper" [@simpleTranslation]="slideControl[0]">
      <img [src]="images[0]" alt="Random first slide">
    <div class="carousel-caption" >
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id2">
    <div class="picsum-img-wrapper" [@simpleTranslation]="slideControl[1]">
      <img [src]="images[1]"  alt="Random second slide">
    <div class="carousel-caption" >
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
  </ng-template>
   ...
</ngb-carousel>

el .html como Ver

otro bombardeo h1{color:red}

  • ViewEncapsultaion.None hace que el .css en su .component sea para toda la aplicación. Así que utilícelo con cuidado, si, por ejemplo, escribe en su componente un css

    todo tuyo h1 en tu aplicación se vuelve “rojo”

    El efecto de deslizamiento funciona bien, creo que el único problema es que no cambia sin hacer clic en las flechas.

  • – foo-baar this.renderer.listen(document, 'keydown.arrowleft', ()=>{ this.carousel.prev() }) 5 de mayo de 2020 a las 0:32 @foo-baar, no se trata del efecto de deslizamiento, si hace clic dentro del carrusel, el teclado funciona (exactamente un carrusel ngb normal). Siempre puede inyectar Renderer2 y escuchar keydown.arrowleft y keydown.arrowright: por ejemplo o usa algo como

    netbasal.com/…

    para controlar el teclado

  • – Eliseo

    5 de mayo de 2020 a las 9:23

    Gracias por responder, lo que quise decir es que el deslizamiento automático en un intervalo fijo no funciona en la implementación anterior,


  • – foo-baar interval=05 de mayo de 2020 a las 9:57 interval=3000@foo-baar, en el stackblitz, en el .html que escribí

    reemplazar por, por ejemplo

    debe ser trabajo


  • – Eliseo

    5 de mayo de 2020 a las 10:02

    Última pregunta: ¿cuál prefieres ng-bootstrap o mdbootstrap?


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad