Algo muy común en páginas actuales es tener un slider, hay muchos frameworks y librerías que te facilitan esta tarea pero con angular aveces puede complicarse al usar typescript, si damos complejidad de que sea tactil y responsivo la primera opción es descargar una librería, aunque por la rapidez de las actualizaciones de angular estas quedan inservibles de manera rápida.
Por esta razón vamos a usar una libreria que esta casada con angular y más específicamente con material angular, asi que vamos a crear un slider táctil usando angular y hammerjs.
Creando slider en angular
lo primero que vamos a hacer es crear un slider sencillo, anteriormente ya tenemos un ejemplo de slider el cual se creaba a partir de los inputs, en esta ocasión vamos a hacer algo mas sencillo aun porque nos interesa la parte táctil.
Construyendo slider con css
Vamos a contruir este slider solamente con angular, asi que no usaremos ninguna libreria, para esto vamos a color estos estilos para que se ordene de derecha a izquierda.
.swipe { width: 100%; overflow-x: hidden; padding-top: 16vh; } .superlarge { width: max-content; display: flex; flex-direction: row; flex-wrap: nowrap; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .horizontal { width: 100vw; margin: 0; padding-top: 3vh; display: flex; flex-direction: column; flex-wrap: nowrap; height: 80vh; justify-content: center; align-items: center; } .horizontal h3 { font-size: 50px; } .entradav { opacity: 0; animation-fill-mode: forwards; animation-name: aparecev; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-duration: 0.6s; } @keyframes aparecev { to { opacity: 1; } }
Ahora el html
<div class="swipe" > <div class="superlarge" > <div class="horizontal entradav" *ngFor="let card of cards" [style.backgroundColor]="card.color"> <h3>{{card.name}} </h3> </div> </div> </div>
y por último el typescript
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { cards = [{ color: '#6657FF', name: '1' }, { color: '#4A9BFF', name: '2' }, { color: '#4361E8', name: '3' }, { color: '#7E43E8', name: '4' }, { color: '#BC4AFF', name: '5' }, { color: '#FF42B6', name: '6' }]; constructor() { } ngOnInit() { } }
Slider tactil con angular y hammer
Vamos a implementar hammer en nuestro proyecto hay dos formas, uno es usando material de angular, en automático de preguntara si quieres instalarlo, la otra forma es manual.
Instalando hammer
npm install --save hammerjs
y en nuestro main.ts colocamos el siguiente import
import 'hammerjs';
y listo
Implementar swipe en angular con hammer
Hammer tiene varios eventos, entre ellos estos:
- pan
- panstart
- panmove
- panend
- pancancel
- panleft
- panright
- panup
- pandown
- pinch
- pinchstart
- pinchmove
- pinchend
- pinchcancel
- pinchin
- pinchout
- press
- pressup
- rotate
- rotatestart
- rotatemove
- rotateend
- rotatecancel
- swipe
- swipeleft
- swiperight
- swipeup
- swipedown
- tap
si leemos un poco la documentación de hammer notaremos que pan y swipe son muy parecidos, la acción que hace la diferencia es que pan se activa desde el momento que comenzamos a mover el dedo y swipe cuando terminamos de moverlo.
Usando swipe para slider táctil en angular.
(swipeleft)="swipeleft($event)" (swiperight)="swiperight($event)"
de tal modo que nuestro html quedaría así
<div class="swipe" (swipeleft)="swipeleft($event)" (swiperight)="swiperight($event)"> <div class="superlarge" [style.marginLeft]="spacefn"> <div class="horizontal entradav" *ngFor="let card of cards" [style.backgroundColor]="card.color"> <h3>{{card.name}} </h3> </div> </div> </div>
podemos ver que usamos [style.marginLeft]=”spacefn” para dar margenes a nuestros documentos y así desplazar el slider táctil, y con swipeleft y swiperight, cuando estas funciones se disparen vamos a entrar a una función nueva y capturaremos el evento en caso que queramos hacer algo con el valor del movimiento (te da una cifra numérica del movimiento del dedo)
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { cards = [{ color: '#6657FF', name: '1' }, { color: '#4A9BFF', name: '2' }, { color: '#4361E8', name: '3' }, { color: '#7E43E8', name: '4' }, { color: '#BC4AFF', name: '5' }, { color: '#FF42B6', name: '6' }]; spacecrr = 0; spacefn = ''; constructor() { } ngOnInit() { } swipeleft(event) { console.log('<--'); if (this.spacecrr < ((this.cards.length - 1) * 100)) { this.spacecrr += 100; this.spacefn = '-' + this.spacecrr + 'vw'; } else { this.spacecrr = 0; this.spacefn = '0vw'; } } swiperight(event) { console.log('-->'); if (this.spacecrr >= 0 && this.spacecrr <= ((this.cards.length - 1) * 100)) { this.spacecrr -= 100; this.spacefn = '-' + this.spacecrr + 'vw'; } } }
como vemos las funciones lo que hace es validar en que posicion esta el slider y continuar o regresar.
si queremos captar los métodos arriba y abajo solo ponemos swipeup y swipedown y hacemos exactamente lo mismo
en caso de querer usar rotar les dejo un ejemplo
Configuración y eliminar error de scroll con hammer y angular
Existe configuraciones para hammer, en este caso la configuración para los gestos de arriba y abajo son los siguientes y se colocan en app.module.ts.
import * as Hammer from 'hammerjs'; export class HammerConfig extends HammerGestureConfig { overrides = <any>{ 'swipe': { direction: Hammer.DIRECTION_ALL } }; } providers: [ { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig } ]
Aclaro que al usar hammerjs este elimina el scroll, o tiene un comportamiento bastante extraño cuando ponemos uno de sus metodos.
Pero como vimos el ejemplo anterior es configurable, si usamos swipeleft y swiperight y scroll en el eje Y necesitamos esta configuración.
overrides = <any> { 'pinch': { enable: false }, 'rotate': { enable: false } }
Repositorio personal (shingrey)