Angular carrusel Swiper configuración paso a paso

Aprende a instalar y configurar un carrusel con swiper en angular, paso por paso de la manera más fácil posible, Angular swiper es uno de los carrusel más moderno, fácil de usar y elegante.para su instalacion seguiremos los siguientes pasos.

Paso número 1 - Instalación

Nos vamos al archivo package.json y agregamos el paquete añadiendo la siguiente línea

"swiper": "^8.4.7"

Y Ejecutamos en la terminal

npm install

Paso número 2 - Lo importamos en el App.module.ts

import { SwiperModule } from 'swiper/angular';

imports: [
BrowserModule, 
AppRoutingModule,
SwiperModule],

Paso número 3 - Agregamos los css o scss

@import "swiper/scss";
@import "swiper/scss/navigation";
@import "swiper/scss/pagination";

y para css agregamos este

@import "swiper/swiper.min.css";
@import "swiper/modules/pagination/pagination.min.css";
@import "swiper/modules/navigation/navigation.min.css";

Paso número 4 - Añadimos la configuración en el archivo ts  

Nos vamos al componente donde vamos a usar el carrusel y agregamos las siguientes importaciones y configuraciónes:

import SwiperCore, {Navigation, Pagination, Scrollbar, A11y, SwiperOptions, Swiper} from 'swiper';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

Paso número 5 - Añadimos la config que va tener nuestro carrusel 

export class SliderPromosComponent implements OnInit {
config: SwiperOptions = {
loop: true,
slidesPerView: 1,
spaceBetween: 50,
navigation: true,
pagination: { clickable: true },
scrollbar: { draggable: true },
};

Paso número 6 - Agregamos el carrusel

slides = [
{
     link: 'https://www.google.com',
     image: 'assets/1.jpg',
},
{
     link: 'https://www.youtube.com',
     image: 'assets/2.jpg',
},
{
     link: 'https://www.facebook.com',
     image: 'assets/3.jpg',
},
];

Paso 7 - agregamos al témplate 

<div class="container">
     <swiper [config]="config" >
          <ng-template swiperSlide *ngFor="let slide of slides">
              <a [href]="slide.link" target="_blank">
                   <img [src]="slide.image" alt="foto" />
              </a>
         </ng-template>
    </swiper>
</div>

Paso número 8 Agregamos estilos a la imagen

img {
     border-radius: var(--bs-border-radius) !important;
     width: 100% !important;
     display: block !important;
     object-fit: scale-down;
     padding: 0px;
}

Paso número 9 - Swiper Carrusel automático

Como opcional podemos hacer que el carrusel mueva las imágenes automáticamente sin necesidad de dar clic para deslizar, para esto hacemos lo siguiente:

import { interval } from 'rxjs';

automatico(swiper: Swiper) {
     const segundos = interval(1000);
     segundos.subscribe(() => {
     swiper.slideNext();
    });
}

  <swiper [config]="config" (swiper)="automatico($event)">