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)