Intégrer Swiper dans Ionic v1

L'utilisation d'Angular.js et de Ionic ne permet pas d'utiliser Swiper en utilisant la structure classique du framework. L'élément <ion-content>, presque indispensable dans Ionic, empêche en effet le bon fonctionnement de Swiper. Cependant, Ionic a tout de même intégré le framework par le biais de l'élément <ion-slides>.

À l'inverse d'une utilisation classique de Swiper, nous devons aborder l'initialisation du slider d'une manière différente.

Structure HTML

<ion-slides ng-if="[__CONDITION__]" options="swiper.options" slider="[__ID_DU_SLIDER__]">

    <ion-slide-page ng-repeat="[__REPEAT__]" >
        <!-- Slide content -->
    </ion-slide-page>

</ion-slides>

Conditionner l'affichage

Pour conditionner l'affichage du slider, il est obligatoire de passer par la directive ng-if et non pas ng-show. En effet, ng-if ne va inclure le HTML qu'au moment où le contenu des slides sera chargé dans le $scope là où ng-show ne ferait que cacher l'élément avec une classe CSS. Or Swiper a besoin d'être initialisé après que le contenu soit arrivé dans le DOM, et ce afin d'éviter certains bugs notamment présents lors de l'utilisation de l'autoplay.

Inclure le CSS

Pour éviter des bugs d'affichage, il ne faut surtout pas oublier d'inclure les feuilles de style dans le fichier index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">

Controller Angular

C'est dans le controller que la logique d'utilisation de Swiper est réellement bouleversée. Personnellement, je préfère tout organiser sous la forme d'un objet :

$scope.swiper = {
    instance : '',

    options : {
        loop: true,
        speed: 300,
        autoplay: 5000,
        autoplayStopOnLast : false,

        onInit: function(swiper){
            $scope.swiper.instance = swiper;
        }
    },

    navigation : {
        next : function(){
            $scope.swiper.instance.slideNext();
        },

        prev : function(){
            $scope.swiper.instance.slidePrev();
        }
    }
};

L'instance

L'instance du slider va permettre d’accéder à l'objet et d’interagir avec par le biais des méthodes décrites ici (v3). Pour initialiser l'instance, on utilise la propriété onInit des options du Swiper ($scope.swiper.options.onInit). Le callback appelé lors de la fin de la fonction permet de stocker l'instance dans la propriété instance.

Navigation

Les boutons de navigation du slider changent aussi dans leur façon d'être initialisés. Au lieu de passer par l'objet options.navigation, nous devons utiliser l'instance du slider et les méthodes slideNext() et slidePrev() appelée par le biais de la directive ng-click depuis la vue.