javascript 离子幻灯片（Swiper） - 例如

Posted 2021-05-03

# 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>`](https://ionicframework.com/docs/v1/api/directive/ionSlides/).

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

## Structure HTML
```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` :
```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 :
```JS
$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)](https://github.com/nolimits4web/Swiper/blob/Swiper3/API.md). 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.

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

<ion-slides ng-if="stickyPosts" options="swiper.options" slider="postSlider" does-continue="true">

	<ion-slide-page ng-repeat="post in stickyPosts" >
		<div ng-include="'templates/subtemplates/card.html'"></div>
	</ion-slide-page>

</ion-slides>

<div class="button button-positive" ng-click="swiper.navigation.prev()">
	Précédent
</div>
<div class="button button-positive" ng-click="swiper.navigation.next()">
	Suivant
</div>

$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();
		}
	}
};