Con la nueva release de Ionic Framework, una de las cosas que más ha cambiado es el componente slidebox. Ahora, se basa en el componente Open Source Swiper.

Hoy verás como usar el nuevo slidebox de ionic framework.

¿Quieres aprender Ionic Framework? ¡¡Mira mi curso de ionic completamente gratuito!!

¿Como afecta a mi template?

Lo primero es ver, a nivel de template, como es la nueva directiva de slibox. La sintáxis es esta:

<ion-slides options="sliderOptions" slider="sliderDelegate">
     <ion-slide-page> Slide 1 </ion-slide-page>
     <ion-slide-page> Slide 2 </ion-slide-page>     
 </ion-slides>

Es decir, tengo:

  • Directiva ion-slides. Recibe los atributos:
    • options: Es un diccionario con parámetros de configuración, donde podemos definir cualquiera de los swipe parameters
    • slider: Asigna el objeto swiper creado a este atributo, permitiéndonos acceder desde el controlador.
  • Directivas ion-slide-page: Tienen que estar dentro de una directiva ion-slides, y básicamente definen el contenido de cada una de las diapositivas.

¿Y qué hago en el controlador?

En el controlador básicamente te interesa crear el objeto con los parámetros de swipe, y probablemente, hacer un $watch sobre el atributo slider para actuar sobre el objeto creado.

Veamos algo muy simple:


.controller('ViewController', function($scope){

//some options to pass to our slider
$scope.sliderOptions = {
direction: 'vertical',
autoplay: 1000,//change every second
}

$scope.sliderDelegate;

//detect when sliderDelegate has been defined, and attatch some event listeners
$scope.$watch('sliderDelegate', function(newVal, oldVal){
if(newVal != null){
//hacer algo con $scope.sliderDelegate
}
});

});

Lo importante aquí son $scope.sliderOptions, donde defino la dirección vertical y un autoplay para que se cambien las diapositivas cada segundo, y el objeto $scope.sliderDelegate.

Podemos ver que coinciden con los atributos que paso en el template (a los que accede a través de la propiedad $scope).

¿Qué es eso de $scope.$watch(‘sliderDelegate’, function(…?
Si queremos usar métodos del objeto que nos devuelve swiper para acceder a nuestro slidebox, por ejemplo para saber qué diapositiva se está mostrando actualmente, tendremos que hacerlo tras su inicialización.

Por eso ponemos un $watch sobre la variable sliderDelegate de nuestro $scope. Cuando se detecta un cambio, se llamará la función de callback que hemos definido en el $watch.

Veámos un ejemplo completo

En el siguiente Codepen, se crea una vista de ionic con un slidebox que cambia automáticamente de diapositiva, y que escucha los eventos de cambio de slide para mostrar el número de diapositiva en que nos encontramos. Además, se utiliza el objeto de configuración para cambiar la diapositiva inicial entre otras cosas.

See the Pen ionic framework 1.2 slidebox by Enrique (@-kaik-) on CodePen.