Share
Dans ce didacticiel, nous utiliserons slick.js, un plugin populaire jQuery, pour créer une galerie d’images responsive attrayante. Voici la galerie que nous allons créer:
Assurez-vous de vérifier la version plein écran et de redimensionner la fenêtre de votre navigateur pour voir comment sa disposition change en fonction de la taille de la fenêtre..
Slick.js est un plugin jQuery bien connu, créé par Ken Wheeler, qui vous permet de construire de beaux carrousels réactifs. Pour mieux comprendre ce que ce plugin peut vous offrir, consultez la documentation.
Heureusement, cela fonctionne non seulement dans tous les navigateurs modernes, mais aussi dans certains anciens, comme IE 8.+.
Enfin, vous voudrez peut-être jeter un coup d'œil à la version de WordPress.
Pour commencer à utiliser slick, commencez par télécharger et installer les fichiers suivants dans votre projet:
Accentsconagua
slick.css ou sa version abrégéeslick.js ou sa version abrégéeVous pouvez éventuellement importer le fichier slick-theme.css fichier.
Vous pouvez récupérer une copie des fichiers slick 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.
De plus, j’ai incorporé Babel pour compiler le code ES6 en ES5 et Lodash pour en tirer parti. rebondir fonction (nous l'utiliserons plus tard).
Dans cet esprit, si vous regardez sous le Réglages onglet de notre stylo de démonstration, vous verrez que j’ai inclus un fichier CSS externe et trois fichiers JavaScript externes.
Paramètres CSS sur CodePen
Paramètres JavaScript sur CodePenÀ ce stade, il est important de comprendre la structure de notre page. Plus important encore, nous allons définir deux carrousels qui ont exactement les mêmes images et qui sont synchronisés (nous verrons comment plus tard). Les dimensions de l’image sont 860 x 550 pixels, bien que dans vos propres projets, elles puissent être différentes..
Enfin, dans le cadre du deuxième carrousel, nous spécifierons les flèches de navigation ainsi qu'un élément permettant de suivre le nombre total de diapositives..
Voici la structure requise pour notre page de démonstration:
Le carrousel est en cours de chargement…
Au total, notre galerie devrait avoir quatre apparences différentes, en fonction de la fenêtre disponible. Visualisons-les en suivant une approche mobile d'abord.
Lorsque la fenêtre du navigateur fait moins de 480 pixels, elle devrait ressembler à ceci: seul le deuxième carrousel et la navigation apparaissent:
Disposition du carrousel sur de très petits écransEnsuite, sur les écrans compris entre 480 et 768 pixels, le résultat devrait être le suivant, avec deux vignettes sous la diapositive principale:
Disposition du carrousel sur de petits écransEnsuite, sur les écrans entre 769px et 1023px, nous introduirons une troisième vignette:
Disposition du carrousel sur les écrans moyensEnfin, sur les grands écrans (≥1024px), il devrait être comme suit, avec les vignettes apparaissant sur le côté (notez qu'elles ne tiennent pas tout à fait sur cette image dans leur intégralité):
Disposition du carrousel sur de grands écransTous les cas ci-dessus sont pris en compte dans les requêtes des médias présentées ci-dessous:
.carrousels synchrone position: relative; affichage: flex; enveloppe souple: enveloppe; justifier-contenu: espace-entre; .synch-carousels> * width: 100%; .synch-carousels .right order: -1; .synch-carousels .left débordement: caché; .synch-carousels .gallery display: none; .synch-carousels .gallery .slick-list height: auto! important; marge: 0 -20px; .synch-carousels .gallery .slick-slide margin: 0 20px; Écran multimédia et (largeur minimale: 480px) .synch-carousels .right marge-bas: 20px; .synch-carousels .gallery display: block; @ Écran multimédia et (largeur minimale: 1024 pixels) .synch-carousels .right position: relative; largeur: calc (100% - 230px); marge inférieure: 0; ordre: 2; .synch-carousels .left width: 210px; .synch-carousels .gallery .slick-slide margin: 0 0 20px 0; .synch-carousels .gallery .slick-list margin: 0;
Remarquez qu'il y a un !important règle. Cela écrase un style lisse inline.
Passons maintenant à notre attention sur les choses liées à JavaScript.
Lorsque le DOM est prêt, nous vous conseillons de mettre en cache certains sélecteurs couramment utilisés:
const $ left = $ (". left"); const $ gl = $ (". galerie"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (". durée du compteur de photos: nth-child (1)");Ensuite, nous initialisons et synchronisons nos deux carrousels. Le code responsable de ce comportement est le suivant:
$ gl.slick (rangées: 0, slidesToShow: 2, flèches: false, déplaçables: false, useTransform: false, mobileFirst: true, réactives: [point d'arrêt: 768, paramètres: diapositivesToShow: 3, point d'arrêt: 1023, paramètres: slidesToShow: 1, vertical: true]); $ gl2.slick (rows: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);
Sans aucun doute, le meilleur moyen de comprendre le fonctionnement de ce code est de lire la documentation. Cependant, laissez-moi vous expliquer deux choses importantes ici:
commeNavFor L’option de configuration nous permet de synchroniser les carrousels et d’en utiliser un comme navigation pour l’autre.useTransform: false. En effet, ils provoquent un léger scintillement dans la première diapositive du premier carrousel sur de grands écrans (nous aurions pu les désactiver uniquement pour le premier carrousel)..Notre galerie ne devrait être visible que lorsque tous les éléments de la page sont prêts. Initialement, un préchargeur facultatif apparaît. Faites référence à nouveau au balisage. Il ressemble à ceci:
Le carrousel est en cours de chargement…
À ce stade, nous devons repenser à la disposition souhaitée de la galerie sur de grands écrans. Si vous regardez les captures d'écran correspondantes, vous remarquerez que les deux carrousels ont les mêmes hauteurs. Pour obtenir ce comportement souhaité, nous devons écrire du code JavaScript personnalisé (au-delà de notre CSS). Ce code va définir dynamiquement la hauteur du premier carrousel égale à la hauteur du second (ou vice versa).
Connaissant les exigences ci-dessus, voici le code qui s'exécute lorsque toute la page est prête:
$ (window) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ (". loading"). fadeOut (); $ ("body"). addClass ("over -visible ");, 300););Et voici la déclaration du handleCarouselsHeight une fonction:
function handleCarouselsHeight () if (window.matchMedia ("(min-width: 1024px)"). correspond) const gl2H = $ (". gallery2)"). height (); $ left.css ("height", gl2H); else $ left.css ("height", "auto"); Lorsque la page se charge, la galerie fonctionne correctement. Mais cela devrait également fonctionner comme prévu lorsque la fenêtre du navigateur est redimensionnée.
Le code qui traite de cette situation particulière est présenté ci-dessous:
$ (fenêtre) .on ("redimensionner", _.debounce (() => handleCarouselsHeight ();, 200));Notez que le gestionnaire d’événements est encapsulé dans un rebondir une fonction. Ceci est une fonction Lodash qui nous aide à limiter le nombre de fois que ce gestionnaire est appelé.
Maintenant que nous avons implémenté avec succès les fonctionnalités principales de notre galerie, allons plus loin et construisons quelques éléments optionnels..
Tout d'abord, dans le coin supérieur droit du deuxième carrousel, nous affichons la diapositive actuelle et le nombre total de diapositives..
Affichage de la diapositive actuelle et du nombre total de diapositivesPour ce faire, nous tirons parti de la init et après le changement événements lisses.
Voici le code associé:
/ * vous devez lier l'événement init avant l'initialisation de slick (voir la démo) * / gl2.on ("init", (event, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". photos-counter span: nth-child (2)"). text (slick.slideCount);); $ gl2.on ("afterChange", (event, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););Comme amélioration supplémentaire, chaque fois que nous cliquons sur une diapositive du premier carrousel, la diapositive associée du deuxième carrousel doit être active. Merci à Slick's slickGoTo méthode, nous sommes en mesure de développer cette fonctionnalité.
Voici le code associé:
$ (". gallery .item"). sur ("click", function () const index = $ (this) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo, index) ;);La démo devrait bien fonctionner dans tous les navigateurs récents et vous pouvez l'utiliser en toute sécurité dans vos projets.
Je n'ai rencontré qu'un petit bug dans certains navigateurs (Firefox, Edge) lors du test de la démo sur de grands écrans. Lorsque vous cliquez sur les flèches de navigation, toutes les diapositives du premier carrousel, à l'exception du premier, ne parviennent pas à atteindre le bord supérieur de leur parent et ne laissent qu'un seul espace vide:
Le bug d'un pixel de Slick sur certains navigateursDernier point mais non le moindre, de petites améliorations et personnalisations peuvent être nécessaires lorsque la fenêtre est redimensionnée, en fonction de vos besoins..
Dans ce tutoriel, nous avons tiré parti de slick.js et avons réussi à construire une belle galerie responsive. J'espère que maintenant, vous êtes prêt à essayer cette implémentation dans vos propres projets. Si cela se produit, n'hésitez pas à partager le lien de votre projet dans les commentaires ci-dessous.!
