Tuesday, March 1, 2016

Implementing Ionic ion-slides in place of the deprecated ion-slide-box

I have been working with Ionic 1.7.14 lately and ran into issues with <ion-slide-box>. It turns out <ion-slide-box> is deprecated and replaced by <ion-slides>. Unfortunately, the documentation is poor. The silver lining is that it is worth the switch as ion-slides is built on iDangerous' Swiper which is probably the best slider/slidebox out there.

For those Ionic loyalists who live by the documentation, good luck making much of anything great based on the documentation at http://ionicframework.com/docs/v2/api/components/slides/Slides/ and http://ionicframework.com/docs/v2/components/#slides.

The reason I say this is because the documentation doesn't show how to expose all the functions of the Swiper plugin via javascript which are seemingly endless (http://idangero.us/swiper/api/). This is also the main reason to even use the new <ion-slides> directive. While you can specify options like loop and pagination (see below) via the Ionic directive's "option" directive, these aren't even explained in the docs except as when used as directives themselves (i.e. pager and loop). Further, it is especially unclear how the entire Swiper API can be leveraged using <ion-slides>.

Here is a solution, specifically note the onInit which captures the Swiper plugin (in original form) to the $scope. Now you can leverage the Swiper API (as referenced in link above) against this $scope.swiper object. The $scope.sliderOptions will be used by the <ion-slides> via the "options" directive as mentioned previously.

// CONTROLLER
// Setup swiper
$scope.sliderOptions = {
    loop: true,
    pagination: false,
    onInit: function(swiper){
        $scope.swiper = swiper;
    },
    onSlideChangeStart: function(swiper){
        //
    }
};

// TEMPLATE
<ion-slides options="sliderOptions">
    <ion-slide-page ng-repeat="slidesin slides">
        // iDangerous Swiper Slide in Ionic
    </ion-slide>
</ion-slides>