Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de carrusel angular 10 con Bootstrap 4

 En este tutorial, aprenderemos cómo crear un carrusel con la última versión de Angular 10 y Bootstrap 4.

El carrusel es una presentación de diapositivas para recorrer una serie de contenido, construido con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcado personalizado. También incluye soporte para controles e indicadores anteriores / siguientes. Fuente

Antes de comenzar, necesita algunos requisitos previos:

  • Conocimientos básicos de TypeScript. En particular, la familiaridad con conceptos orientados a objetos como clases y decoradores de TypeScript.
  • Una máquina de desarrollo local con Node 10+ , junto con NPM 6+ instalado. La CLI de Angular requiere un nodo como la mayoría de las herramientas frontend en la actualidad. Simplemente puede ir a la página de descargas del sitio web oficial y descargar los binarios para su sistema operativo. También puede consultar las instrucciones específicas de su sistema sobre cómo instalar Node usando un administrador de paquetes. Sin embargo, la forma recomendada es usar NVM - Node Version Manager - un script bash compatible con POSIX para administrar múltiples versiones activas de Node.js.

Nota : Si no desea instalar un entorno local para el desarrollo de Angular pero aún desea probar el código en este tutorial, puede usar Stackblitz , un IDE en línea para el desarrollo de frontend que puede usar para crear un proyecto Angular compatible con Angular. CLI.

Paso 1: instalación de Angular CLI 10

Comencemos instalando la última versión de Angular CLI 10.

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Dirígete a una nueva interfaz de línea de comandos y ejecuta el siguiente comando:

$ npm install -g @angular/cli

En el momento de escribir este tutorial, angular / cli v10 estará instalado en su sistema.

Paso 2: creación de una nueva aplicación de Angular 10

En el segundo paso, creemos nuestro proyecto. Regrese a su interfaz de línea de comandos y ejecute los siguientes comandos:

$ cd ~
$ ng new angular10carousel

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo local usando los siguientes comandos:

$ cd angular10carousel
$ ng serve    

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

Paso 3: Instalación de Ng-Bootstrap

A continuación, necesitamos instalar ng-bootstrapusando el siguiente comando:

$ ng add @ng-bootstrap/ng-bootstrap

Esta biblioteca proporciona una implementación angular para Bootstrap 4, por lo que no necesita usar jQuery.

Abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

import { Component } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers

})
export class AppComponent  {

  images = [700, 800, 807].map((n) => `https://picsum.photos/id/${n}/900/500`);

  constructor(config: NgbCarouselConfig) {
    // 
    config.interval = 2000;
    config.keyboard = true;
    config.pauseOnHover = true;
  }

}

Lo importamos NgbCarouselConfigy lo agregamos a la matriz de proveedores del componente, luego lo inyectamos a través del constructor y lo usamos para personalizar los valores predeterminados de los carruseles utilizados por este componente y sus hijos. Establecimos el intervalo entre diapositivas en dos segundos, habilitamos el teclado para mover las diapositivas y hacer una pausa al pasar el cursor sobre cada diapositiva.

También definimos una serie de imágenes para usar en diapositivas.

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<div class="container-fluid">
<h1>
Angular 10 Carousel Example
</h1>
<h2>Full tutorial in Techiediaries</h2>
<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[0]" alt="Random first slide">
    </div>
    <div class="carousel-caption">
      <h3>First Slide</h3>
      <p> Angular 10 Carousel Example </p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[1]" alt="Random second slide">
    </div>
    <div class="carousel-caption">
      <h3>Second Slide</h3>
      <p> Check out Techiediaries</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[2]"  alt="Random third slide">
    </div>
    <div class="carousel-caption">
      <h3>Third Slide</h3>
      <p>for full tutorial...</p>
    </div>
  </ng-template>
</ngb-carousel>
</div>

Usamos ng-templatecon la ngbSlidedirectiva para agregar una diapositiva de carrusel y usamos HTML para definir el contenido de la diapositiva.

A continuación, abra el src/app/app.component.htmlarchivo y agregue los siguientes estilos:

ngb-carousel .wrapper {
  position: relative;
  height: 0;
  padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .wrapper>img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Puedes jugar con este ejemplo de https://stackblitz.com/edit/angular-10-carousel-example

Conclusión

En este tutorial, hemos visto cómo crear un carrusel con diapositivas ricas en Angular 10 usando ng-bootstrap.


Publicar un comentario

0 Comentarios