Lâchez le Widget Carrousel d'images sur la page, choisissez vos images dans la médiathèque, définissez des diapositives par vue pour chaque appareil et activez la lecture automatique. Quatre étapes, environ deux minutes, et aucune licence nécessaire.
C'est la version courte Le reste couvre les paramètres qui séparent un carrousel qui fonctionne de celui qui semble légèrement faux sur les téléphones, plus la disposition du flux de couverture, la boîte à lumière et les deux erreurs d'image qui rendent lent un carrousel par ailleurs fin. Vous n'êtes pas sûr qu'un carrousel d'images ait même la bonne forme ? Le gamme complète de widgets de carrousel compare chaque type en un seul endroit, et le panne de carrousel versus descente de curseur règle le nom.
Ce dont vous avez besoin
Sans élémentur et sans addons principaux. Le propre carrousel d'images d'Elementor existe mais n'a pas de légendes de diapositives et un contrôle réactif limité, cette procédure pas à pas utilise donc le Carrousel d'images Master Addons(en), qui est également gratuit et ajoute des légendes, une boîte à lumière et une disposition de flux de couverture.
Étape 1 : Ajouter le widget
Ouvrez la page dans Elementor et recherchez dans le panneau du widget “image carousel.” Faites-le glisser dans un conteneur.
Il restitue avec des images d'espace réservé afin que vous puissiez voir la forme avant de commettre un contenu. Laissez-les pour l'instant. Il est plus facile de configurer la mise en page avec des espaces réservés cohérents que avec vos vraies photos, qui sont toutes de tailles différentes.
Étape 2 : Ajoutez vos images
Cliquez sur le champ de la galerie et choisissez dans la médiathèque, ou téléchargez. Commander des questions et faire glisser pour réorganiser les œuvres, alors mettez d'abord votre image la plus forte, car sur mobile, elle est peut-être la seule que l'on voit.
Sous les paramètres de contenu, vous trouverez la taille de l'image, la source des sous-titres et le comportement des liens.
La taille de l'image est le paramètre que les gens laissent sur Full et regrettent. Full signifie le téléchargement original : une exportation de caméra 4000 px servie dans une diapositive 400 px. WordPress générait déjà des versions plus petites ; choisir medium_large ou large et vous allez couper le poids du carrousel par la plupart d'entre eux sans aucune différence visible.
Légendes tirez du champ Légende ou Description de la médiathèque, donc si les diapositives ont besoin de texte, écrivez-le là plutôt que de chercher une zone de texte par diapositive dans le widget.
Étape 3 : Navigation
Flèches, points, fraction ou barre de défilement Choisissez en fonction du nombre de diapositives dont vous disposez :
- Sous 8 diapositives : points. Les gens peuvent voir l’ensemble en un coup d’œil et sauter.
- 8 à 20 : flèches seulement Vingt points est un frottis, pas un contrôle.
- Plus de 20 : flèches plus fraction (“04 /32”) Le nombre est la seule chose qui indique à quelqu'un où il se trouve.
Sur mobile, vérifiez la taille de la flèche La valeur par défaut du bureau est souvent une cible de 30 px, et le minimum accessible pour un tap est de 44 px. Bump it on the mobile breakpoint or drop brows ally and fellow on swipe.
Étape 4 : Comportement du carrousel
C'est le panel qui décide si le carrousel a raison.
Diapositives par vue : réglez-la trois fois. Cliquez sur les icônes de l'appareil en haut du paramètre et donnez à l'ordinateur de bureau, à la tablette et au mobile leur propre valeur Quatre, deux, un est la valeur par défaut sûre Cette seule étape est la différence entre un carrousel qui fonctionne sur les téléphones et un qui affiche quatre vignettes écrasées.
Diapositives à faire défiler. Réglez-le sur 1 pour une sensation de navigation continue, ou faites correspondre les diapositives à la vue pour une pagination de type page La correspondance est meilleure lorsque les diapositives forment des groupes ; 1 est meilleur pour un long ensemble indifférencié.
Lecture automatique. Allumez-le pour les galeries décoratives Éteignez-le si les diapositives sont cliquables, car quelqu'un cherchera une image et cliquera sur celle qui l'a remplacée. Le bureau des couvertures en pause sur vol stationnaire mais il n'y a pas de vol stationnaire au toucher.
La boucle infinie nécessite suffisamment de diapositives. Les clones de swiper glissent pour simuler le wrap, et il a besoin d'au moins le double de vos diapositives à la vue Quatre images à trois par vue sauteront visiblement Ajouter des images ou désactiver la boucle.
Vitesse. 300 à 500 ms. En dessous de 200, cela ressemble à une coupure plutôt qu'à une transition ; au-dessus de 800 personnes commencent à cliquer deux fois.
La disposition du flux de couverture
Basculez la disposition de la norme vers la couverture et les glissières latérales s'éloignent en 3 D, s'atténuent et reculent, laissant la glissière centrale comme la seule lisible.
Cela convient aux portfolios et aux études de cas, tout ce qui est pertinent lorsqu'une image à la fois. C'est faux pour tout ce que les gens doivent comparer, car tout le design existe pour vous empêcher de regarder les voisins.
Deux réglages pour aller à droite : tourner entre 30 et 40 degrés (le passé 50 et les glissières latérales deviennent des éclats illisibles), et le centre glisse sur, ou l'image active se trouve à ras à gauche et la composition s'effondre.
Coverflow est l'un des quatre styles basés sur la profondeur. Flip, arc et orbite sont les trois autres, et le Guide carrousel Elementor 3D couvre ce pour quoi chacun est bon.
Coiffage des diapositives
L'onglet de style gère l'espacement entre les diapositives, le rayon de bordure, les ombres et les états de vol stationnaire.
Le décor qui mérite une seconde réflexion est écart. L'écart nul fait lire le carrousel comme une seule bande d'image continue, ce qui est parfait pour un panorama et erroné pour les éléments distincts. 16 à 24px est la plage où les diapositives sont lues comme des cartes séparées sans que la rangée ne semble clairsemée.
Les effets de survol (échelle, superposition, révélation de légende) s'appliquent à l'ensemble, et non par diapositive Gardez l'échelle sous 1,05. une diapositive qui croît de 15 % en vol stationnaire pousse dans ses voisins et ressemble à un bug de mise en page.
Lightbox et légendes
Allumez le lightbox et cliquer sur une diapositive ouvre l'image pleine grandeur sur la page, avec ses propres commandes suivantes et précédentes traversant tout le carrousel.
C'est la raison d'utiliser un carrousel plutôt qu'une grille pour la photographie Le carrousel est l'index ; la lightbox est le spectateur Les titres et sous-titres sont transportés dans la lightbox, donc sous-titre une fois et cela fonctionne aux deux endroits Si vous voulez que l'index soit visible sur la page sous forme de bande miniature plutôt que caché derrière un clic, c'est le Galerie Slider widget à la place, qui a besoin de Pro.
Une mise en garde : la lightbox sert l'image pleine grandeur, pas la vignette Si vous définissez la taille de l'image sur medium_large pour le carrousel et vos originaux sont des fichiers de caméra 8 Mo, la lightbox va toujours récupérer la version 8 Mo. Compresser les originaux lors du téléchargement, pas seulement la taille de l'affichage.
Si vous voulez une navigation par vignettes
Le Carrousel d'images est une seule rangée Il n'y a pas de bande miniature pilotant un grand aperçu Si cette disposition en deux parties est ce que vous recherchez, importez le Galerie de plaques de vitrine au lieu de cela, l'un des modèles gratuits du collection de modèles de curseurs: une seule plaque sous une bande miniature, avec un panneau de légende qui comprend une table de données d'image modifiable pour le lieu, l'heure, l'objectif, l'ouverture, l'obturateur et l'ISO Il a été construit pour la photographie La même forme d'aperçu plus les vignettes est ce que la plupart des gens veulent dire quand ils demandent un carrousel vidéo, et le guide de curseur de carrousel vidéo et de galerie couvre cette version.
Pour l'importer : Additions Master → Widget Builder → Importer Widget, faites glisser le JSON dans, et il apparaît dans Elementor sous Favoris Il fonctionne sur le plugin gratuit, aucune licence Pro nécessaire La même collection a le Slider héros en socle(en), un curseur de héros à saignée complète avec des liens par diapositive, qui est également gratuit à importer. Vingt dessins nommés au total8 d’entre eux gratuits.
Style de flèche
Taille, couleur, fond, rayon de bordure et position : à l'intérieur du carrousel, à l'extérieur ou en chevauchant les bords.
Les flèches positionnées à l'extérieur du carrousel ont besoin d'espace horizontal, et sur un conteneur pleine largeur il n'y en a pas Elles vont se clipser Soit garder le conteneur plus étroit que la fenêtre d'accès soit positionner les flèches à l'intérieur.
Le résultat
Avant que vous ne l'appeliez terminé, chargez la page sur un téléphone réel par cellulaire Pas l'émulateur de périphérique du navigateur, qui redimensionne la fenêtre mais garde la connexion de votre bureau et le GPU La plupart des problèmes de carrousel n'apparaissent que sur du matériel réel sur un réseau réel.
Deux erreurs qui rendent un carrousel lent
Servant des images en taille réelle. Couvert au-dessus, et c'est le grand Un carrousel à dix glissières à Pleine taille sur un site de photographie peut faire 20 Mo. Le même carrousel à large est sous 2 Mo et personne ne peut le dire.
Le mettre au-dessus du pli avec lecture automatique. Le carrousel devient votre plus grande peinture satisfaite, et la lecture automatique signifie que le navigateur anime pendant la seconde la plus sensible aux performances du chargement de la page. Si un carrousel doit être en haut, désactivez la lecture automatique et laissez-le reposer immobile jusqu'à ce que la page soit réglée.
Les logos sont un travail différent des photographies. Ils apparaissent dans des formes et des couleurs incompatibles et ont besoin de sortir le soir avant de s'asseoir en rangée, ce qui est le cas procédure pas à pas du carrousel logo passe par.
Questions fréquemment posées
Elementor a-t-il un carrousel d'images gratuit ?
Oui. Le plugin gratuit d'Elementor comprend un widget Image Carousel avec des flèches, des points et une lecture automatique. Il n'a pas de légendes de diapositives et un contrôle limité par appareil. Le Master Addons Image Carousel, également gratuit, ajoute des légendes, une boîte à lumière, une disposition de flux de couverture et des paramètres entièrement réactifs. Chaque paramètre est répertorié dans le Documentation du carrousel d'images.
Comment puis-je rendre un carrousel d'images Elementor réactif ?
Définissez les diapositives par vue séparément sur chaque point d'arrêt en utilisant les icônes de l'appareil en haut du paramètre plutôt que de laisser une valeur pour tous les écrans Quatre sur le bureau, deux sur la tablette, un sur mobile fonctionne pour la plupart des galeries Vérifiez la taille des flèches sur mobile aussi, car la valeur par défaut est souvent inférieure à la cible du robinet accessible 44 px.
Comment ajouter des légendes à un carrousel d'images Elementor ?
Les légendes proviennent du champ Légende ou Description de la médiathèque, et non d'une zone de texte du widget Définissez la source de légendes dans les paramètres de contenu du widget, puis modifiez le texte sur chaque image de la médiathèque Ils passent automatiquement à la lightbox.
Puis-je lier chaque image du carrousel à une URL différente ?
Oui. Définissez le comportement du lien sur l'URL personnalisée dans les paramètres de contenu et chaque diapositive prend sa propre destination à partir du champ de lien de l'élément multimédia. C'est ce que recherchent les gens lorsqu'ils recherchent un carrousel d'images avec plusieurs URL personnalisées.
Pourquoi mon carrousel d'images saute-t-il quand il boucle ?
Pas assez de diapositives pour la boucle Les clones Swiper glissent pour créer le wrap-around et ont besoin d'au moins deux fois le nombre de diapositives par vue Quatre images affichées trois à la fois sauteront à chaque cycle Ajouter plus d'images ou désactiver la boucle infinie.
Pourquoi mon carrousel d'images ne s'affiche-t-il pas après avoir activé la mise en cache ?
La combinaison ou le report JavaScript a arrêté le chargement de Swiper avant l'exécution du code d'initialisation. Exclure swiper, elementor-frontend et jquery-core depuis l'optimisation JS dans votre plugin de cache, et sur LiteSpeed, ajoutez-les également au champ d'exclusion du mode invité. Procédure pas à pas complète : Dépannage du curseur Elementor Swiper.
