1 - Introduction
Les diaporamas / carrousels sur les sites web sont de nos jours indispensables. Pour pouvoir les réaliser sur le Phantom Thème, nous avons choisit le plugin javascript Swiper, utilisé sur de nombreux sites comme Nike, Disney, McDonalds ou encore BMW.
Ce plugin permet de créer énormément de diaporamas différents grâce au paramétrage proposé, et nous avons décliné celui-ci suivant les usages sur nos différentes sections du thème.
3. -Paramètres généraux
Sur de nombreuses sections, vous retrouvez une en-tête de paramètre nommée Paramètres du diaporama. Chacune possède plus ou moins les mêmes paramètres, certains n’étant pas adapté suivant les sections. Vous retrouverez de manière générale les paramètres suivant :
Vous retrouverez également dans Paramètres de thème > Général > Style des flèches la possibilité de choisir entre plusieurs styles pour le site entier :
|  |
Déclinons ces paramètres :
A - Transition
Permet de gérer l’effet de transition entre les diapositive. Voici les différentes transitions que vous retrouverez dans le Phantom thème :
Glisser | Fondu |
|  |
Cube | Carrousel |
 |  |
Mode (Transition disponible sur les sections Diaporama / Diapositive / Images vedettes / Shopping feed Insta) | Chaîne |
 |  |
Recouvrement | Flip |
 |  |
Cartes | Encastré |
 |  |
Remplacement | Superposition |
 |  |
Retournement | Renversement |
 |  |
Ouverture |
|
 |
|
Remarque : Parmi toutes ces transitions, seules les transitions Glisser et Chaîne permettent d’avoir plusieurs éléments affichés à la fois.
B - Afficher la pagination
La pagination permet à l’utilisateur d’indiquer que le diaporama possède plusieurs diapositive et où il en est dans le défilement de celui-ci. Plusieurs pagination sont disponibles :
En point | En trait |
 |  |
En continu | En nombre |
 |  |
Barre de défilement horizontale |
|
 |
|
C - Défilement & vitesse de défilement
Le défilement peut être sur 3 modes différents : Manuel, automatique ou continu.
Le mode manuel oblige l’utilisateur à effectuer une action pour afficher les autres diapositives.
Le mode automatique fait défiler les diapositives automatiquement avec pour délai entre chaque transition la vitesse de défilement. Si une action est effectuée sur le diaporama, le délai est reprend à 0.
Le mode continu fait défiler les diapositives linéairement. Ce mode est utile pour une présentation d’annonces ou de photos par exemple. La vitesse de défilement est également lié à ce paramètre, mais cette fois celle-ci correspond au temps d’apparition de la diapositive.
4 - Bureau & mobile
Des paramètres sont indépendants entre bureau et mobile, mais ceux-ci sont les mêmes pour les deux formats.
Ainsi nous retrouvons les paramètres suivant :
Afficher les flèches (permet d’afficher ou non, et choisir l’emplacement des flèches sur le diaporama)
Lire le diaporama en boucle (permet de revenir à la 1ère diapositive une fois la transition effectuée depuis la dernière)
Espace entre les diapositives
Seuls les paramètres Afficher les flèches / la pagination au survol sont sur bureau, n’ayant pas de survol sur mobile.
5 - Section diaporama
La fonctionnalité du parallax horizontal global est seulement disponible sur cette section.
Le media qui sera mis en arrière-plan du diaporama sera celui du 1er bloc, la vidéo ayant priorité sur l’image.
Ainsi vous pouvez obtenir des résultats comme ci-dessous :
Avec une image :
Avec une vidéo :
