Ionic - Boîte de diapositives JavaScript

Une boîte de diapositive contient des pages qui peuvent être modifiées en faisant glisser l'écran de contenu.

Utilisation de Slide Box

L'utilisation de la boîte de diapositive est simple. Vous avez juste besoin d'ajouterion-slide-box en tant que conteneur et ion-slideavec la classe de boîte à l'intérieur de ce conteneur. Nous ajouterons de la hauteur et de la bordure à nos boîtes pour une meilleure visibilité.

Code HTML

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

La sortie ressemblera à celle illustrée dans la capture d'écran suivante -

Nous pouvons changer la boîte en faisant glisser le contenu vers la droite. Nous pouvons également faire glisser vers la gauche pour afficher la boîte précédente.

Quelques attributs qui peuvent être utilisés pour contrôler le comportement de la boîte de diapositive sont mentionnés dans le tableau suivant.

Méthodes de délégation

Attribut	Type	Détails
continue	Booléen	Devrait faire glisser la boîte en boucle lorsque la première ou la dernière boîte est atteinte.
lecture automatique	Booléen	La boîte de diapositive devrait glisser automatiquement.
intervalle entre les diapositives	nombre	Valeur de temps entre les changements de diapositives automatiques en millisecondes. La valeur par défaut est 4000.
afficher-pager	Booléen	Le téléavertisseur doit-il être visible.
clic sur pager	expression	Appelé lorsqu'un pager est mis sur écoute (si le pager est visible). $index est utilisé pour correspondre à différentes diapositives.
modifié sur la diapositive	expression	Appelé lorsque la diapositive est modifiée. $index est utilisé pour correspondre à différentes diapositives.
active-slide	expression	Utilisé comme modèle pour lier l'index de la diapositive actuelle.
délégué-handle	chaîne	Utilisé pour l'identification de la boîte à lames avec $ionicSlideBoxDelegate.

Délégué de la boîte à diapositives

le $ionicSlideBoxDelegateest un service utilisé pour contrôler toutes les boîtes de diapositives. Nous devons l'injecter dans le contrôleur.

Code du contrôleur

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

Code HTML

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

Le tableau suivant montre $ionicSlideBoxDelegate méthodes.

Méthodes de délégation

Méthode	Paramètres	Type	Détails
slide (paramètre1, paramètre2)	Accélérer	nombre, nombre	Paramètre to représente l'index vers lequel glisser. speed détermine la vitesse du changement en millisecondes.
enableSlide (paramètre1)	shouldEnable	booléen	Utilisé pour émailler ou désactiver le glissement.
précédent (paramètre1)	la vitesse	nombre	La valeur en millisecondes que le changement doit prendre.
Arrêtez()	/	/	Utilisé pour arrêter le glissement.
début()	/	/	Utilisé pour démarrer le glissement.
currentIndex ()	/	nombre	Renvoie l'index de la diapositive actuelle.
slidesCount ()	/	nombre	Renvoie le nombre total de diapositives.
$ getByHandle (paramètre1)	manipuler	chaîne	Utilisé pour connecter des méthodes à la boîte de diapositive particulière avec la même poignée. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();