Ionic Slider con ejemplos claros y prácticos

¿Pensando en implementar un Ionic Slider en tu aplicación? O, quizás, solo buscas información de alguno de sus campos o funciones ¿verdad?

Si la respuesta es sí a alguna de estas preguntas, o cuestiones derivadas de estas, déjame decirte que no estás solo. La mayoría de desarrolladores, en los cuales me incluyo, las tuvimos algún día. Y, sobre todo, con el tema de los sliders.

Mi nombre es Aitor Sánchez González y soy desarrollador de Software desde el año 2014. Me especializo en apps móviles, y servicios de back end para las mismas, y en este artículo te explicaré, de una manera clara y con ejemplos, cómo puedes comenzar a utilizar estos ion sliders en tus apps.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Bueno, hoy vamos a hablar de unos de los componentes que más me gustan de desarrollar en Ionic. Se trata de los Ionic Slider y su componente «<ion-slides>» y <ion-slide>». Si eres un poco pícaro y estás atento de manera activa sobre el blog, ya me habrás entendido.

Nota: La diferencia que encontraremos entre los «slide ionic ios» y «ionic slide android» de manera programática será nula. Pero sí que hay un poco de diferencia visual. Sobre todo, en los paginadores que veremos más adelante.

¿Qué es un Ionic Slider?

Vale, si ya conoces este tipo de componentes y lo que te interesa es profundizar un poco más sáltate este punto.

Son los típicos carruseles de imágenes que vemos en muchas webs a día de hoy (aunque cada vez menos) llevados un poco más allá. Digamos que podemos construir controles y componentes que podrán ser deslizados de manera horizontal, o vertical, mostrándonos solo de uno, o los que elijamos, en pantalla. A parte de eso cuentan con efectos, tamaños, y más cosas que vamos a ver a continuación.

También comentar que, este componente también puede ser usado en Angular aunque con unos ligeros cambios.

Cómo construir un Ionic Slider ejemplo / example

Continuamos avanzando y ahora vamos a ver cómo podemos construir nuestro Slider propio. Este componente tiene una amplia gama de personalización así que seguramente se hará un poco largo el artículo. Pero vamos, como digo siempre, quien algo quiere, algo le cuesta.

En primer ligar vamos a hablar de los dos componentes principales que vamos a utilizar para construirlo. Uno de ellos es «ion-slides» y el otro «ion-slide». El primero será en que crea la estructura para por debajo y el segundo es el control padre donde construiremos todo nuestro código html. Decir también que el ion-slide tiene que ir dentro de ion-slides. De no ser así la vista de nuestra app puede ser impredecible.

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

Cómo veis en el código, es simplemente lo que he explicado en la parte de encima de este. Algo que, de momento, es sencillo ¿verdad?

Veamos un poco más de código, ahora le toca a TypeScript.

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}

Yeah! Ya tenemos la referencia de nuestro Slider almacenada en la variable Slides. Ahora es plan de ponerse a jugar con él.

Ahora bien, como has podido comprobar. Para poner un ejemplo he decidido insertar en el código un método. Que lo que hace, aunque seguro ya lo sabes, es llevar la posición de nuestro Slider a la 2 con un tiempo de «recorrido» (vamos a llamarlo así) de 500 milisegundos. Que nos valga de ejemplo para ver más cosas.

ion-slide y su importancia como caja / box

Genial, ya comprendemos un poco más cómo funciona. Ahora vamos a darle la puntilla para que sepamos 100% como rula.

• Este componente es el padre del contenido que queremos mostrar en pantalla. Como he dicho antes, siempre tiene que ir dentro de un ion-slides, vamos a tomar esto como la regla número 1.
• Por otro lado, aunque no necesariamente, suele utilizarse conjunto de un *ngFor que recorra toda la información que contiene y a partir de ahí construir nuestra vista.
• Lo más importante, se puede meter todo el código html que queramos dentro de él. Y esto es lo que lo hace tan especial.

Sí, como has leído en el tercer punto, podemos hacer lo que queramos con él. Podemos meter imágenes / image, vídeos, texto, párrafos, ion-items, checkbox, inputs, buttons, bars, lo que queramos…. pero una cosa más hay que agregar. ¡PODEMOS METER TODO JUNTO!

Espera Aitor, espera. ¿Que qué? Si, has escuchado bien, podemos incluir todos los componentes que queramos, separados o en conjunto, dentro de nuestro ion-slide. ¿Cómo te quedas? Veamos un ejemplo:

<ion-slides>
    <ion-slide *ngFor='let item of miArray'>
        <ion-card>
            <ion-card-header>
                 <img src='{{item.imagen_destacada}}'>
            </ion-card-header>
            <ion-card-content>
                 <h2>{{item.nombre}}</h2>
                 {{item.extracto}}
            </ion-card-content>
        </ion-card>
    <ion-slide>
</ion-slides>

Pongamos la situación de que tienes un array de usuarios, donde lo que quieres mostrar es una tarjeta con los datos de cada uno metidos en un carrusel / carousel. Pues bien, este código puede servirte perfectamente.

En primer lugar, en el *ngFor, recorremos todos los espacios de memoria de nuestro array. Y luego simplemente llamando al «item» podemos extraer los datos de cada uno. Aunque esto, si sigues este blog, ya lo sabrás.

Me gustaría mucho que hicieras una mini app que disponga de un código así, verás que alucinante es, y me lo cuentes. Mientras tanto, continuemos.

Cómo hacer un botón de siguiente / next button

En primer lugar, y dentro del componente que contenga el Slider en cuestión, necesitamos escribir el siguiente código:

...
    @ViewChild('mySlider')  slides: IonSlides;

    ....

    swipeNext(){
      this.slides.slideNext();
    }
...

Cómo intuirás, la primera línea «@ViewChild» será la que se encarge de darnos una referencia al componente que estamos usando en el html. Y la función «swipeNext» es la que, en si misma, nos permite avanzar una posición en dicha referencia. El código html sería el siguiente:

<ion-slides pager="true"  pager="false" #mySlider>

  <ion-slide>
  </ion-slide>

  <ion-slide>
  </ion-slide>

   <ion-button (click)="swipeNext()">Next</ion-button>

</ion-slides>

Una implementación muy sencilla que ahora podrás usar en tus aplicaciones porque es 100% funcional 🙂 Sigamos…

Eventos de ion slides

Como todo componente, o como la mayoría, tiene sus propios eventos. Como digo siempre, no comentaré todos, porque son muchos, y solo lo que tienen que ver con el componente en cuestión.

enableKeyboardControll(boolean)

Me ha parecido interesante colocar este aquí por una razón. En las nuevas entregas de Ionic cada vez más se está tendiendo a suplantar a Angular como Framework para desarrollar WebsApps. Quizás muchos no lo compartís, otros sí, pero yo en este caso me alegro. Así solo tengo que acostumbrarme a uno…

En fin, esta función lo que nos permite es permitir que el Slider cambie de posición cuando hacemos uso de las flechas de dirección del teclado.

getActiveIndex()

Nos devuelve la posición actual en la que está nuestro Slider. Es una función sencilla para identificar, por ejemplo, el objeto que se ha pulsado para tratarlo de cualquier forma.

getPreviousIndex()

Interesante esta función dirás. ¿Para qué la queremos si tenemos el índice actual? Pues muy sencillo, es para cuando el Slider está moviéndose. Porque hasta que no termine el recorrido que está llevando, «activeIndex» siempre será uno menos.

isBeginning()

Nos devuelve un booleano que nos dice si el Slide está en la primera posición o no.

isEnd()

Similar al anterior, pero que nos devuelve si está en la última posición del Slider.

length()

Como toda función length, nos devuelve la cantidad de Slides que componen el Componente.

lockSwipeToNext(boolean)

Nos permite hacer que el usuario no pueda continuar al siguiente Slide dependiendo de lo que pasemos por parámetro. Se puede llamar en tiempo de ejecución para bloquear y desbloquear el Slider dependiendo, por ejemplo, del paso del registro en el que se encuentre el usuario.

lockSwipeToPrev(boolean)

Similar al anterior, pero para el Slider anterior y no el siguiente.

lockSwipes(boolean)

Similar a los dos anteriores, pero para o tener que llamar a las dos funciones. Así si llamamos a esta se bloqueará, o desbloqueará, para el anterior y el siguiente.

slideNext(velocidad, callback)

Bien, aquí tenemos a una de las funciones que más usaremos en nuestras apps cuando usemos este componente. Como su propio nombre indica, avanza el módulo a la posición siguiente y recibe por parámetros, en primer lugar, la velocidad en milisegundos que quieres que tarde en llegar y una función callback que nos permite controlar cuando el slider ha llegado al final.

slidePrev(velocidad, callback)

El similar a la función anterior, pero en lugar de avanzar, retrocede.

slideTo(posición, velocidad, callback)

Función que es similar a las dos anteriores, pero en lugar de ir hacia delante, o hacia atrás, nos permite decirle a que posición del índice queremos que nos lleve el Slider. Se lo pasamos como primer parámetro y listo. Hay que tener cuidado si rellenamos el array de manera dinámica para no pasarnos del índice. De lo contrario lanzará un error.

startAutoplay()

Nos permite poner en piloto automático la reproducción del movimiento del Slider. Comúnmente llamado autoplay.

stopAutoplay()

Lo contrario que la función anterior.

update()

Este método nos permite actualizar el contenido de nuestros componentes. En caso de que actualicemos el contenido de los arrays que se recorren cuando construimos el html, tendremos que llamar a esta función para actualizarlos.

Bien, pues estas son las funciones que iremos usando normalmente. Como he dicho al principio no voy a comentar todas ni las de los padres. Así que estas que hemos visto son las que más importantes me han parecido y seguramente las que más vamos a usar.

Ahora vamos a ver las propiedades de este componente. Como también he comentado al principio del artículo, no son pocas. Así que esto se extenderá un poquito.

Propiedades de Ionic Slides

Las propiedades que vamos a ver aquí, como su propio nombre indica, son campos / fields que son públicos y pueden ser asignados directamente asignando el valor sin necesidad de pasar por una función get o set. También recordar que cogerá el height automático del alto de los componentes que contenga. Si queréis modificarlo, tendréis que modificar el alto de estos.

• autoplay
  • number
  • Nos permite decirle a sistema el retraso que hay en milisegundos. Si no se le asigna, el componente no tendrá autoplay.
• centerSlides
  • boolean
  • Centra el contenido de los ion-slides al centro de la pantalla.
• control
  • array : slide
  • Carga sobre el ion-slides nuevos slides eliminado los anteriores. Por defecto tiene un valor null.
• dirección
  • string (vertical, horizontal)
  • Setea la orientación de nuestros slider para que sus componentes se coloquen de manera horizontal o vertical.
• effect
  • string (slide, fade, cube, coverflow, flip)
  • Nos permite setear el efecto de nuestros sliders. En el punto anterior de la lista puedes ver los disponibles. Digamos que son las animaciones / animations de transición de nuestras diapositivas.
• initialSlide
  • number
  • Le dice a Ionic cuál es el primer resultado que debe mostrar dentro del array de datos. Inciso aquí: Hay que tener cuidado con la longitud del array. Si ponemos un número mayor que el length de nuestra matriz fallará.
• loop
  • boolean
  • Nos permite poner el bucle en nuestro Slide. Si llega al final volverá al principio eternamente.
• pager
  • boolean
  • Nos permite mostrar la paginación de nuestros Slides. Se mostrarán con unas bolitas debajo del módulo. La posición / position del contenedor de paginación se podrá definir desde CSS.
• paginationType
  • string(bullets, fraction, progress, arrows)
  • Nos permite cambiar la forma en la que se muestra el paginado. Por defecto bullets.
• spaceBetween
  • number
  • Nos permite ajustar el espacio que queda entre nuestros slides. De manera predeterminada 0.
• speed
  • number
  • Nos permite definir cuál será la velocidad que tardará en cambiar de un Slide a otro. Esta medida está realizada en milisegundos.
• zoom
  • boolean
  • Nos permite definir si queremos que nuestros slides tengan zoom. De manera predeterminada no.

Bien, pues estas son las propiedades aisladas de nuestro componente. Ahora vamos a ver una cosita que no hemos visto en el resto de tutos. Seguramente, y después de decisión popular de la comunidad, voy a incluirla en todos los tutos que ya he hecho.

Se trata de la salida, OutputEvents, que emite el componente cuando ya ha realizado alguna opción y que podemos escucharlas para dar servicio adicional a nuestros usuarios.

Cómo poner un Ionic Slider en Autoplay

En el caso de que queramos que el slider tenga una funcionamiento autónomo, independientemente de si el usuario lo usa, o no, tendremos que realizar los siguiente:

Estas serán las opciones de configuración que tenemos que meter
slideOptsOne = {
 initialSlide: 0,
 slidesPerView: 1,
 autoplay:true
};

Ahora veamos el Slider en si:

<ion-slides [options]="slideOptsOne">
 <ion-slide *`ngFor`="let item of topStories">
   <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
     <ion-card-content>
       <ion-img [src]="item.image"></ion-img>
       <h2> <b>{{item.title}} </b></h2>
       <h4>{{item.summary}}</h4>
     </ion-card-content>
   </ion-card>
 </ion-slide>
</ion-slides>

¿Ves? Es super sencillito 🙂

Output events o Eventos de salida de Ionic Slides

Vale, como he comentado por encima en el párrafo anterior, este componente emite un determinado número de eventos cuando se realiza X acción. Estos eventos, como llegar al final de un slide o haber llegado al final de la cola, se pueden controlar para que hagamos determinadas acciones. Vamos a verlos.

Nota: Para controlarlos tendremos que llamarlos desde el HTML y pasarle entre las comillas la función que queremos ejecutar. También pueden recibir parámetros.

ionSlideAutoplay

Este evento es llamado cuando el Slider ionic comienza el movimiento.

ionSlideAutoplayStart

Este evento se ejecuta cuando es llamado el evento autoplayStart que hemos visto en puntos anteriores.

ionSlideAutolayStop

Similar al anterior, pero es llamado cuando se llama a autoplayStop.

ionSlideDidChange

Este callback es llamado cuando una transacción ha terminado. No importa la posición en la que esté nuestro componente. Será llamado con cada una de ellas.

ionSlideDoubleTap

Como su propio nombre indica, es llamado cuando el usuario hace doble click sobre cualquiera de las diapositivas.

ionSlideDrag

Es llamado cuando el usuario usa el evento de sistema drag (arrastrar) sobre nuestro módulo.

ionSlideNextEnd

Es invocado cuando uno de los slides termina el recorrido (hacia adelante) de cualquier slide.

ionSlideNextStart

El similar al anterior pero cuando comienza en lugar de cuando acaba.

ionSlidePrevEnd

Es solicitado cuando uno de los slides termina el recorrido (hacia atrás) de cualquier slide.

ionSlidePrevStart

Similar al anterior, pero al comienzo en lugar de cuando acaba.

ionSlideReachEnd

Se emite cuando el Slider ha llegado a su última diapositiva. Muy útil para controlar, por ejemplo, si queremos cambiar el contenido del Slider.

ionSlideReachStart

Se emite cuando el slider vuelve a su posición inicial. Es importante saber que no se ejecutará aunque el usuario lleve el Slider al comienzo o en la primera carga del componente.

ionSlideTap

El solicitado cuando el usuario hace un tap sobre cualquiera de los componentes de nuestro slide. Es más, recibe parámetros que nos permitirán saber cual es la posición sobre la que se ha hecho el tap.

ionSlideWillChange

Similar al que hemos visto un poco más arriba. Este evento es llamado cuando comienza un cambio de diapositiva. Sea cual sea.

Y visto todo esto vamos a pasar a comentar algunas cosillas que me parecen interesantes que las sepas.

Ionic slider options

Me gustaría comentar este punto, es algo que muchos de mis usuarios me han pedido. Y aunque tu quizás no, por que si no no estarías aquí, lo voy a explicar para los que si que les interese.

Pues bien, seré breve. Las Options de los Slides han desaparecido / deprectated a partir de la versión 2 de Ionic y si quieres hacer un buen uso del componente tendrás que manejar todo mediante TypeScript.

Este movimiento me parece muy aconsejable por parte de la plataforma dado que, en un componente tan complejo, dejar al aire propiedades en el HTML me parecería un retraso más que un avance.

Pues bien, pregunta contestada 🙂

Y el regalito, cómo construir un Ionic carousel

Más contenidos del curso

Ion Select | todo lo que debes saber

¿Pensando en incluir un Ion Select, o selector, en tu aplicación de Continuar leyendo

Ion-radio (Ionic radio button) de 0 a 100

¿Pensando en incluir radio buttons en tu app de Ionic? o, tal Continuar leyendo

Firebase en Ionic – ¿Qué es y cómo se utiliza? con Ejemplos / Examples

¿Pensando en integrar Firebase dentro de tu app hecha en Ionic? O, Continuar leyendo

Pues parece que ya hemos llegado al final compañero. La verdad que me ha gustado muchísimo como ha quedado este tutorial. Y la implicación de los usuarios de la anterior a esta, que me motivaron a escribirla, mejor aún. Simplemente quiero decir que gracias por estar aquí y nos vemos en el siguiente artículo. Un saludo 🙂