Bref tutoriel
wallop est un plugin de diaporama JavaScript pur pour mobile. Ce plug-in de diaporama n'a qu'une taille de 4 Ko. Son principe est simplement d'ajouter et de supprimer les classes appropriées pour les éléments HTML afin de les afficher et de les masquer. Quant à ces styles de classe, vous pouvez les personnaliser entièrement. Les fonctionnalités incluent :
Le mobile d'abord
Les effets d'animation et de transition sont générés à l'aide de CSS
Léger, seulement en taille 4k
Très flexible et évolutif
Événements et API personnalisables
Aucune dépendance externe
Comment utiliser
Pour utiliser ce plug-in de diaporama, vous devez d'abord introduire les fichiers wallop.css et Wallop.min.js.
<link rel="stylesheet" href="path/to/wallop.css"> <script src="path/to/Wallop.min.js"></script>
Structure HTML
La structure HTML de base de cette diapositive est la suivante. Vous pouvez ajouter la classe .Wallop-item--current à la première diapositive.
<div class="Wallop"> <div class="Wallop-list"> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> </div> <button class="Wallop-buttonPrevious">Previous</button> <button class="Wallop-buttonNext">Next</button> </div>
Plug-in d'initialisation
<script> var wallopEl = document.querySelector('.Wallop'); var slider = new Wallop(wallopEl); </script>
Ajouter des effets d'animation
Ce plug-in de diaporama n'a pas d'effets de transition d'animation par défaut. Si vous devez ajouter des effets d'animation, vous devez introduire le fichier wallop-animation.css correspondant et ajouter la classe Wallop--xxxx à l'élément. Par exemple, pour ajouter un effet de fondu :
<head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-fade.css"> </head> <div class="Wallop Wallop--fade"> ... </div>
Types d'animation disponibles
Les types d'animation de transition disponibles pour cette diapositive sont :
Wallop--glisser
Wallop - fondu
Wallop - échelle
Wallop--rotation
Wallop--fold
Wallop--diapositive-verticale
Ci-dessus sont quelques types d'animation de transition intégrés, et vous pouvez également personnaliser votre propre animation de transition.
Paramètres de configuration
Voici quelques paramètres de configuration disponibles :
boutonPreviousClass : 'Wallop-buttonPrevious'
boutonNextClass : 'Wallop-buttonNext'
itemClass : 'Wallop-item'
currentItemClass : 'Wallop-item--current'
showPreviousClass : 'Wallop-item--showPrevious'
showNextClass : 'Wallop-item--showNext'
hidePreviousClass : 'Wallop-item--hidePrevious'
hideNextClass : 'Wallop-item--hideNext'
carrousel : vrai
Méthode
Le plugin Wallop slideshow fournit quelques méthodes de base pour le contrôle des boutons :
allerÀ
Permet de passer à la diapositive à l'index spécifié.
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到第二个slide(index从0开始) Wallop.goTo(1);
suivant
Passez à la diapositive suivante.
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到下一个slide Wallop.next();
précédent
Passez à la diapositive précédente.
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到前一个slide Wallop.previous();
Événement
Wallop émet un événement à chaque fois que la diapositive change et renvoie un objet de détail contenant l'index de la diapositive actuelle et l'objet Wallop.
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); Wallop.on('change', function(event) { // event.detail.wallopEl // => <div class="Wallop">…</div> // event.detail.currentItemIndex // => number });
Ce qui précède est le processus de création d'effets de diaporama purement JavaScript pour mobile partagé avec vous. J'espère qu'il pourra vous aider à créer de plus beaux effets de diaporama.