angular tutorial

Slider táctil usando angular y hammerjs

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.

creando nuestro proyecto

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)

demo live

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.