El uso de un carousel o slider es importante cuando tenemos muchos elementos del mismo tipo que queremos mostrar en un espacio reducido. Por ejemplo, testimonios de usuarios, galerías de imágenes, servicios, en fin casi cualquier cosa.

Luego de una intensa búsqueda me encontré con Swiper, que no solo sirve para Angular, sino que está disponible para casi todas las librerías y frameworks frontend.

Lo que me gustó fue la sencillez con la q se pueden lograr resultados asombrosos y las decenas de efectos que tiene. Sin más preámbulo vamos a ello.

Instalando Swiper para Angular 8, 9 y 10

Como siempre la puedes instalar usando el gestor de paquetes de nodejs que prefieras:

yarn add swiper
npm i swiper

Creando la configuración

Ahora tenemos que incluir la clase en nuestro app.module.js:

import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [SwiperModule]
})

export class AppModule {}

Ahora debemos agregar los estilos, que incluyen entre otras cosas los efectos de slide. Para ello simplemente debemos modificar nuestro styles.scss e incluir la siguiente línea al principio.

@import '~swiper/swiper-bundle';

A usar nuestro slider en Angular

En el componente donde lo usaremos debemos importar el componente principal.

import SwiperCore from 'swiper/core';

Y luego en nuestra plantilla html simplemente debemos definir la estructura que tendrá:

<swiper [slidesPerView]="3">
  <ng-template swiperSlide>Slide 1</ng-template>
  
  <ng-template swiperSlide>Slide 2</ng-template>
  
  <ng-template swiperSlide>Slide 3</ng-template>
  
  <ng-template swiperSlide>Slide 4</ng-template>
  
  <ng-template swiperSlide>Slide 5</ng-template>
</swiper>

El código anterior nos generará un carousel básico, donde se verán siempre tres elementos y si nos movemos horizontalmente veremos los demás.

Ahora vamos a ponerle unos controles y una paginación debajo incluyendo el siguiente código en nuestro componente que los importará pues no están en la misma clase.

import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
} from 'swiper/core';

SwiperCore.use([Navigation, Pagination]);

Y luego en nuestro html lo modificamos para dejarlo así:

<swiper [slidesPerView]="3" [pagination]="{ clickable: true }" [navigation]="true">

    <ng-template swiperSlide> Slide 1</ng-template>
    
    <ng-template swiperSlide>Slide 2</ng-template>
    
    <ng-template swiperSlide>Slide 3</ng-template>
    
    <ng-template swiperSlide>Slide 4</ng-template>
    
    <ng-template swiperSlide>Slide 5</ng-template>

</swiper>

Y ya tienes tu slider!!! Como siempre te estaré dejando el link a la documentación donde puedes encontrar todas las opciones de esta librería espectacular.

📋 Documentación