Share
Dans un précédent article, je vous ai montré comment créer une galerie d'images personnalisée avec slick.js. Aujourd'hui, je vais décrire le processus de création d'un curseur de carrousel animé, réactif et plein écran avec owl.js (ou «Owl Carousel»)..
Comme d'habitude, pour avoir une première idée de ce que nous allons construire, jetez un œil à la démo correspondante de CodePen (consultez la version plus grande pour une meilleure expérience):
Owl.js est un plugin jQuery populaire créé par David Deutch qui vous permet de créer des carrousels réactifs et attrayants. Pour mieux comprendre ce que ce plugin peut vous offrir, consultez les démos.
Heureusement, il est très bien supporté par le navigateur, après avoir été testé sur les appareils suivants:
Pour plus de détails, consultez la documentation.
Pour commencer à utiliser owl, commencez par télécharger et installer les fichiers suivants dans votre projet:
Accentsconagua
owl.carousel.css ou sa version abrégéeowl.carousel.js ou sa version abrégéeVous pouvez éventuellement importer le fichier owl.theme.default.css fichier.
Vous pouvez récupérer une copie des fichiers owl correspondants en visitant son dépôt Github, en utilisant un gestionnaire de paquets (par exemple, npm) ou en chargeant les ressources nécessaires via un CDN (par exemple, cdnjs). Pour ce tutoriel, je choisirai la dernière option.
Pour les besoins de ce tutoriel, au-delà des fichiers hibou, j'ai également incorporé Babel et Bootstrap 4..
Dans cet esprit, si vous regardez sous le Réglages onglet de notre stylo de démonstration, vous verrez que j’ai inclus trois fichiers CSS externes et deux fichiers JavaScript externes.
Pour lancer les choses, nous définissons un carrousel comportant trois diapositives. Chacune de ces diapositives contient un titre, un sous-titre et un bouton d'appel à l'action.
Voici la structure requise pour notre page de démonstration:
Il convient de mentionner deux choses à ce stade:
Une fois le code HTML en place, examinons les styles CSS que nous appliquerons à notre page. Pour plus de simplicité, nous ne discuterons qu’une partie des styles disponibles..
Tout d'abord, nous définissons deux propriétés personnalisées et deux classes auxiliaires:
: racine --main-white-color: blanc; --main-black-color: noir; .static position: static; .cover background-size: cover; position de fond: centre; répétition de fond: non répétée;
Ensuite, nous spécifions les styles pour les diapositives du carrousel, y compris les transitions:
.hibou-carrousel. hibou-glissière position: relative; hauteur: 100vh; couleur de fond: gris clair; .owl-carrousel .owl-slide-animated transformer: translateX (20px); opacité: 0; visibilité: cachée; transition: tous 0.05s; .owl-carrousel .owl-slide-animated.is-transitioned transformer: aucun; opacité: 1; visibilité: visible; transition: tous les 0.5s; .owl-carrousel .owl-slide-title.is-transitioned transition-delay: 0.2s; .owl-carrousel .owl-slide-subtitle.is-transitioned transition-delay: 0.35s; .owl-carrousel .owl-slide-cta.is-transitioned transition-delay: 0.5s;
Enfin, nous définissons des règles pour les méthodes de navigation:
.hibou-carrousel. hibou-points,. chouette-carrousel. hibou-nav position: absolue; .owl-carrousel .owl-dots .owl-dot span background: transparent; bordure: 1px solid var (- couleur principale); transition: tous les 0.2s se relâchent; .owl-carrousel .owl-dots .owl-dot: envergure du survol, .owl-carrousel .owl-dots .owl-dot.active span background: var (- main-black-color); .owl-carrousel .owl-nav gauche: 50%; Top 10%; transformer: translateX (-50%); marge: 0;
Remarque: Les diapositives doivent couvrir toute la hauteur de la fenêtre et nous leur donnons donc hauteur: 100vh. Cependant, comme cette unité n’est pas cohérente sur certains périphériques (par exemple, les périphériques iOS), une autre option consiste à définir la hauteur des diapositives par le biais de JavaScript (pour plus d’informations, reportez-vous au panneau JavaScript de la démo)..
À ce stade, nous sommes prêts à porter notre attention sur JavaScript.
Dans un premier temps, nous allons initialiser le carrousel. Par défaut, le plugin fournit une «navigation par points», mais notre carrousel inclura également des flèches de navigation..
Options de navigation par hibouNous activons l’option de navigation si le nav propriété de configuration. De plus, nous définissons certains SVG personnalisés comme des flèches grâce au navText propriété de configuration.
Le code qui déclenche le carrousel est présenté ci-dessous:
const $ owlCarousel = $ (". owl-carrousel"). owlCarousel (items: 1, loop: true, nav: true, navText: ['','']);Ensuite, nous animons le contenu de chaque diapositive. Ce comportement est traité via le modifié événement que hibou fournit.
Voici le code associé:
$ owlCarousel.on ("modified.owl.carousel", e => $ (". owl-slide-animated"). removeClass ("is-transitioned"); const $ currentOwlItem = $ (". owl-item" ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"). addClass ("is-transitioned");); Ainsi, chaque fois que nous visitons une nouvelle diapositive, le contenu de toutes les diapositives disparaît tout d'abord. Ensuite, le contenu de la diapositive actuelle apparaît avec une belle animation.
Remarque: à la place du modifié nous aurions pu également utiliser le traduit un événement.
Jusqu'à présent, nous avons vu comment les animations sont déclenchées lorsque nous parcourons les diapositives. Mais nous souhaitons également ce type d’animation lors du chargement initial du carrousel. Pour implémenter cette fonctionnalité, nous allons utiliser le initialisé un événement.
Voici le code lié à cet événement:
/ * vous devez lier l'événement initialisé avant l'initialisation d'owl (voir la démo) * / $ (". owl-carrousel"). on ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););Dans cet événement, nous ajoutons le est en transition classe aux éléments de la première diapositive.
Il est important de noter que cet événement doit être attaché avant l'initialisation du carrousel..
Avant de continuer, couvrons une chose délicate. Si vous regardez la page de démonstration, vous verrez qu'il y a un section élément défini sous le carrousel. Par défaut, jusqu’à ce que le carrousel se charge, le contenu de la section apparaît et un petit saut se produit dans notre page.
Il y a deux façons de corriger ce comportement indésirable. Tout d’abord, nous pouvons ajouter un préchargeur (nous l’avons déjà fait dans le tutoriel sur les slicks). Une deuxième option que nous allons implémenter ici est de cacher le section et le montrer dès que le carrousel est initialisé.
En termes de code, la règle CSS requise est la suivante:
section display: none;
Et le code JavaScript:
$ (". owl-carrousel"). sur ("initialized.owl.carousel", () => setTimeout (() => // autre code ici $ ("section"). show ();, 200););La dernière chose à faire est de positionner la navigation par points. Par défaut, c'est absolument positionné. Les choses suivantes devraient arriver:
.hibou-diapositive-texte élément de la diapositive cible. La fonction qui exécute et définit la position souhaitée pour nos points est la setOwlDotsPosition.
Voici cette fonction:
fonction setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ target); Cela isole le .hibou-diapositive-texte élément de la diapositive active et le passe comme argument à la doDCalculs Sous-fonction.
Voici cette sous-fonction:
fonction doDotsCalculations (el) hauteur constante = el.height (); const haut, gauche = el.position (); const res = hauteur + sommet + 20; $ (". owl-carrousel .owl-dots"). css (top: '$ res px', gauche: '$ left px'); Dans cette fonction, nous définissons le Haut et la gauche valeurs de la .hibou-points élément basé sur la hauteur et la position de l'élément cible.
Pour aller plus loin, la position des points devrait être mise à jour à mesure que nous redimensionnons la fenêtre du navigateur. Pour ce faire, nous tirons parti de la redimensionner événement hibou.
Voici le code nécessaire:
$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););Enfin et surtout, lorsque nous parcourons les diapositives, les points doivent être repositionnés en fonction de la hauteur et de la position du contenu de la diapositive active. Grace à modifié événement à nouveau, nous sommes en mesure de résoudre cette nouvelle exigence.
Voici le code associé:
$ owlCarousel.on ("modified.owl.carousel", e => // autre code ici const $ currentOwlItem = $ (". owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););Avant de terminer, discutons d’un bogue courant du hibou Si nous supprimons la section située sous le carrousel, la barre de défilement verticale disparaît etune partie de la diapositive adjacente apparaît.
Pour résoudre ce problème, nous déclenchons la rafraîchir après l’initialisation du carrousel, comme ceci: $ owlCarousel.trigger ("refresh.owl.carousel");
La démo devrait bien fonctionner dans tous les navigateurs récents et vous pouvez l'utiliser en toute sécurité dans vos projets. Voici un rappel de ce que nous avons construit:
Dans ce didacticiel complet, nous avons réussi à créer un curseur de carrousel animé en plein écran avec owl.js. J'espère que vous aurez acquis de nouvelles compétences que vous pourrez mettre en pratique dans vos projets à venir. Comme toujours, si vous avez des questions, faites le moi savoir dans les commentaires ci-dessous.
