Comment faire un slider facilement avec Ionic

Dans cet article, je vais vous montrer comment créer un slide d'image avec ionic facilement :-)

Je pars du principe que vous avez déja créé votre application ionic et si ce n'est pas le cas, vous pouvez télécharger le code de l'application.

On commence par notre controller, qui va instancier 2 collections d'images $scope.gotPictures et $scope.avengersPictures (Pour cet exemple, j'utilise des images stockées en local.) et qui va nous permettre de les afficher dans notre html.

www/js/controller.js

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

  $scope.gotPictures = [
    {
      'src' : 'img/baratheon.jpg'
    },
    {
        'src' : 'img/bolton.jpg'
      },
    {
        'src' : 'img/lannister.jpg'
    },
    {
        'src' : 'img/stark.jpg'
    },
    {
        'src' : 'img/targaryen.jpg'
    },
    {
        'src' : 'img/valar-morghulis.jpg'
    }
  ];

  $scope.avengersPictures = [
    {
      'src' : 'img/hulk.jpg'
    },
    {
        'src' : 'img/ironman.jpeg'
      },
    {
        'src' : 'img/thor.jpg'
    },
    {
        'src' : 'img/captainamerica.jpg'
    }
  ];
});

ion-scroll est une directive fournis par le framework ionic permettant de créér un conteneur où le contenu sera scrollable.

Je peux donc mettre toutes mes images à l'intérieur de cette directive en indiquant une direction de scroll.

La class item (également fournis par ionic) qui englobe le ion-scroll va permettre entre autres d'afficher les images horizontalement.

www/templates/tab-slide

<ion-view view-title="Slide">
  <ion-content class="padding">
    <div class="item">
      <ion-scroll direction="x">
        <img ng-repeat="picture in gotPictures" ng-src="{{picture.src}}" class="picture-thumb"/>
      </ion-scroll>
    </div>
    <div class="item">
      <ion-scroll direction="x">
        <img ng-repeat="picture in avengersPictures" ng-src="{{picture.src}}" class="picture-thumb"/>
      </ion-scroll>
    </div>
  </ion-content>
</ion-view>

Un peu de css sur nos images

www/css/style.css

.picture-thumb {
    padding: 2px 2px 2px 2px;
    height: 150px;
}

Et voila tout simplement !

Pour voir le résultat live, je vous invite à fork l'application sur github ou à la télécharger en utilisant ionic view avec l'identifiant 448d8417

Pierre-Julien D'alberto Aka Goundar pour lui ionic c'est de l'or en barre