Crear slider con angular

crear slider con angular – Una de las cosas que más piden haciendo una página web son los sliders, esto sirve mucho para enseñar fácilmente que hay en una página , lo más común es usar Jquery, pero esta librería se complica usando Angular.

Encontre soluciones pero no estan actualizados, asi que decidi hacer mi propio slider, y tratare de explicar que es cada cosa.

Qué son los input?

Los input es una forma muy sencilla de pasar información de un componente a otro,  lo llaman decorador y esto es porque lo podemos llamar en las etiquetas como lo hacemos con la etiqueta style o onclick.

input trabaja con el core de angular, aunque usaremos para crear slider con angular, este decorador lo podemos usar para cualquier cosa.

Qué son los output?

Aunque no usare esta propiedad quiero explicarte, la diferencia del input es que recibiremos una respuesta a nuestro componente padre, en pocas palabras es como un callback entre componente padre a hija.

Que necesitamos para crear slider con angular

vamos a dividir en 2 partes, el primer componente solo sera el slider, aqui trabajaremos con las imagenes y las animaciones, y el otro lado sera donde vamos a ingresarlos.

Slider con angular ts

usaremos los siguientes import

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

DomSanitizer es una «herramienta» de angular que sirve para verificar que no estamos ingresando script maliciosos, esto lo necesitamos porque agregaremos imágenes en el css, es decir que modificaremos estilos.

Agregando input

export class SliderComponent implements OnInit {
  @Input ('imgs') sld: string;
  @Input('timer') transition: string;
  imgs;
  imag: any[] = [];
  sizeul : number;
  sizeli: number;
  animation: string;
  time:number ;
  sliderc: string;
   sliderl; string;
  constructor(private sanitizer: DomSanitizer) { }

Para declarar los input simplemente agregamos @input y enseguida podemos ponerle un nombre en este ejemplo puse ‘imgs‘, luego una variable y el tipo que recibimos.

recordemos que todo esto es en el lado del componente slider, tambien podemos declararlo de la siguiente manera

@Input sld: string;

declaramos sanitizer en el contructor para poderlo usar más adelante.

Lógica para la animacion y creacion de slider

this.imgs = this.sld.split(",");
    this.sizeul = 100 * this.imgs.length;
    this.sizeli = 100 / this.imgs.length;
    this.time = parseInt(this.transition) * this.imgs.length;

lo primero que vamos a hacer es detectar los datos que pasamos, usamos un string con «,» para separar información, es decir recibiremos algo así:

«img1,img2img3»

A Partir de esto vamos a fragmentarlo para hacer un array, nuestra idea es hacer un slider con angular de la siguiente manera.

para esto vamos a poner las imágenes una tras otra y moveremos el slider de derecha a izquierda.

let sct: string;
    let lt: string;
    let porcentaje: number = 0;
    lt = '@keyframes carouselM { '
     for( let x = 0 ; x <= 100; x = x + this.sizeli){
       if(porcentaje == this.sizeul || porcentaje == 0){
         if(porcentaje != 100){
           lt += x - 5 +"% {left: -"+(porcentaje-100)+"%;} ";
         }
         porcentaje = 0;
         lt += x +"% {left: "+porcentaje+"%;} ";
         porcentaje += 100;
       }else{
         lt += x - 5 +"% {left: -"+(porcentaje-100)+"%;} ";
         lt += x +"% {left: -"+porcentaje+"%;} ";
         porcentaje += 100;
       }
     }
     lt += ' };';

Para crear esto, vamos a hacer un script donde donde construimos la animación dependiendo las imágenes detectadas para que mueva de derecha a izquierda, si ven el código parece que hay un error, pero meto un dato falso para que la última foto dure un poco más de tiempo (si lo encuentran dejen un comentario).

     //create style
    let hd= document.getElementsByTagName('head')[0];
    let cr = document.createElement("style");
    let tx = document.createTextNode(lt);
    cr.appendChild(tx);
    hd.appendChild(cr);

Con este código lo que hacemos es insertar los estilos en nuestro css de manera muy convencional.

  this.sliderc = this.sizeul.toString() + '%';
    this.animation = "carouselM "+ this.time+"s infinite";
    this.sliderl = this.sizeli.toString() + '%';

    this.sliderl = this.sizeli.toString() + '%';
    this.imgs.forEach(e => {
      this.imag.push(this.sanitizer.bypassSecurityTrustStyle('url(../../assets/slider/' + e + '.jpg)'))
    });

con estos estamos usando dos variables uno para poner los estilos extras y por fin usamos el sanitizer, con esto nos permite pasar las url sin que creen que estamos insertando código malicioso .

y el html del slider es el siguiente

<div class="carrousel">
    <ul class="sld" [style.width]="sliderc" [style.animation]="animation">
        <li *ngFor="let img of imag" [style.width]="sliderl">

            <div class="slider" [style.background-image]="img"></div>
        </li>
    </ul>

</div>

css

.carrousel {
    width: 100%;
    overflow: hidden;
}

.sld {
    list-style: none;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sld>li {
    position: relative;
    float: left;
    width: 33.33%;
}

.sld .slider {
    display: block;
    width: 100%;
    max-width: 100%;
}

.slider {
    height: 80vh;
    background-size: cover;
    width: 100%;
    background-position: center center;
}

Llamar a componente slider

para llamar a un componente solo nos fijamos en nuestro archivo ts en de slider donde dice selector, en el mio se llama

selector: ‘app-slider’

y lo llamamos asi

<h1>Slider - unprogramador</h1>
<app-slider imgs="1,2,3" timer="3"></app-slider>

Ejemplo live

Repositorio

más sobre angular