Fonctionnalités du curseur de carrousel Lory Animation CSS et assistance tactile

De tous les plugins carrousel en ligne Je dois tirer mon chapeau à Lory. C'est un tel concept simple mais c'est facilement l'un des les curseurs les plus puissants sur le Web.

le version minifiée total d'environ 7 Ko qui n'est pas petit mais certainement n'est pas mauvais pour un curseur de carrousel tactile.

Vous pouvez ajouter ce plugin à n’importe quel site web fonctionne sur jQuery ou plain vanilla JS. Il peut courir avec pas de dépendances ce qui est excellent pour la compatibilité.

Lory est également l’un des rares plug-ins qui ne se dégrade pas dans les anciens navigateurs. Ses entièrement pris en charge dans IE10+, et les anciennes versions peuvent toujours exécuter le curseur, juste sans animations et petits extras.

Tu devras faire vous-même le codage programmatique si vous voulez ajouter du contenu mais c'est étonnamment simple. Vous pouvez définir la taille de chaque panneau, la durée de l'animation et la gestion des navigateurs réactifs..

Consultez la page d'accueil de Lory pour code source et détails sur la configuration.

Commencez par ajouter la bibliothèque Lory JS sur votre site tête section, soit sous forme de plugin jQuery ou de bibliothèque vanilla. Toutes les versions sont actuellement hébergé sur le CDN Cloudflare, il est donc très facile d'inclure une copie sans téléchargement.

Avec le fichier JavaScript installé, vous souhaiterez créer une liste non ordonnée HTML avec le contenu de la diapositive, mais Lory vient avec quelques classes prédéfinies alors c'est bien de s'en tenir à leur modèle.

Voici quelques exemple de code extrait du référentiel principal de Lory GitHub:

Maintenant, dans jQuery (ou JS simple), vous pouvez mettre en place un appel de fonction. Ça devrait ressembler a quelque chose comme ca:

 $ ('. js_slider'). lory (infinite: 1);

Noter la infini Cette option n’est que l’une des nombreuses fonctionnalités que vous pouvez personnaliser. Et vous pouvez toujours changer le .js_slider classe pour répondre à vos besoins.

En développant avec ce plugin, vous risquez de vous poser des tonnes de questions de personnalisation. Je recommande fortement parcourir la documentation qui se trouve tout en bas de la page GitHub.

Ce n’est probablement pas le meilleur endroit pour les documents, mais heureusement, ils sont plutôt petits. Vous avez seulement environ 10 options à personnaliser et peut-être 10-12 événements différents vous pouvez bricoler. Cette information peut également être trouvée au bas du site Web de Lory, mais il est beaucoup plus facile à lire sur GitHub.

Les mises à jour ne sont pas aussi fréquentes mais vous pouvez toujours rédiger une demande d'émission sur GitHub si vous rencontrez des problèmes. Si vous avez vraiment des problèmes avec le code, vous aurez probablement plus de facilité à les résoudre sous Stack Overflow..

De toute façon, vous pouvez commence assez vite en utilisant les CDN Cloudflare et GitHub. Et si vous cherchez un démonstration en direct avec code consultez cette entrée CodePen.