Carrousel d'images

Une rangée d'images statiques mange de l'espace et demande aux visiteurs de faire défiler chacun Un carrousel montre le même ensemble dans un curseur compact et glissable que les gens touchent réellement Le Carrousel d'images widget dans Modules complémentaires principaux pour Elementor construit ce curseur à partir d'une galerie WordPress normale, puis ajoute la lecture automatique, une boîte à lumière, plusieurs styles de navigation et un mode de flux de couverture, le tout à partir du panneau Élémenteur.

Vous choisissez les images, choisissez combien d'affichages à la fois, et décidez comment les visiteurs se déplacent entre eux Pas de codes courts, pas de plugin de curseur séparé Ce guide parcourt chaque paramètre du widget, du chargement de la galerie au coiffage des flèches Pour les démos et une comparaison avec le propre carrousel d'Elementor, voir le Widget carrousel image Elementor page.

Préférez regarder en premier ? ce court tutoriel couvre le Carrousel d'images de la galerie au style :

Ce que fait le widget Image Carousel #

Le widget transforme une sélection d'images en carrousel coulissant Il montre une ou plusieurs images par vue, avance tout seul ou en clic, et ouvre chaque image dans une boîte à lumière pour un look en taille réelle Les légendes, les bordures, les superpositions et le style des flèches sont tous intégrés.

Il fonctionne sur le moteur Swiper, de sorte que le curseur est tactile et réactif dès le départ Sur un téléphone le même carrousel reflue vers moins de colonnes, et vous pouvez cacher les flèches sur mobile si elles gênent.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Une poignée d'images téléchargées sur votre Médiathèque, ou prêtes à être téléchargées.

Comment ajouter le widget Image Carousel #

Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Carrousel d'images(ou faites défiler vers la section Addons principaux) Faites glisser le widget sur votre page Il se charge vide jusqu'à ce que vous ajoutiez des images, la galerie est donc toujours la première étape.

Ajoutez et commandez vos images #

Dans le Contenu onglet, ouvrez le Images sectionnez et cliquez sur le champ de la galerie pour lancer le sélecteur de médias WordPress Sélectionnez les images que vous souhaitez, puis utilisez Modifier la galerie pour les faire glisser dans l'ordre, ajoutez des légendes ou déposez-en une avec l'icône X.

De retour dans le panneau, la section Images vous donne trois contrôles supplémentaires :

• Résolution de l'image : choisissez la taille que WordPress sert, de la vignette jusqu'à la pleine, ou définissez une taille personnalisée. Moyen ou grand maintient la page lumineuse tout en restant nette dans le curseur.
• Activer la galerie Lightbox : allumez ceci afin que les visiteurs puissent cliquer sur une image pour l'ouvrir en taille réelle dans une fenêtre contextuelle. Une fois éteintes, les images sont affichées uniquement.
• Bibliothèque Lightbox : choisissez le moteur contextuel, soit Fancybox, soit la propre lightbox d'Elementor Les deux regroupent les images du carrousel afin que les visiteurs puissent les parcourir à l'intérieur de la fenêtre contextuelle.

Configurer la navigation #

Le Navigation section contrôle la façon dont les gens se déplacent dans les diapositives Commencez par le Navigation dropdown, qui définit le style de contrôle : flèches et points, flèches et fraction, flèches, points, progression ou aucun.

• Afficher la barre de défilement : ajoute une barre de progression dragable sous le curseur.
• Position des flèches : placez les flèches Haut, Centre ou Bas, et gauche, centre ou droite à l'intérieur.
• Placement : définissez les flèches à l'intérieur du curseur ou à l'extérieur.
• Masquer la flèche sur mobile : déposez les flèches sur de petits écrans où glisser est le geste naturel.
• Icône suivante et icône précédente : échangez les flèches par défaut contre n'importe quelle icône de la bibliothèque d'icônes Elementor.

Réglez le comportement du carrousel #

Le Paramètres du carrousel la section est l'endroit où le curseur obtient son mouvement. C'est la partie qui décide du nombre d'images affichées, de la vitesse à laquelle elles se déplacent et si le curseur boucle.

• Diapositives par colonne : le nombre de rangées lorsque vous exécutez le curseur dans une direction verticale.
• Mise en page : choisissez Carrousel pour un curseur plat standard ou Coverflow pour un effet 3 D.
• Hauteur automatique : laissez la hauteur du curseur s'adapter à l'image actuelle.
• Vitesse de lecture automatique et de lecture automatique : activez le glissement automatique et réglez le délai entre les diapositives en millisecondes (5 000 est cinq secondes).
• Pause sur Hover : arrêtez la lecture automatique lorsque le curseur est au-dessus du curseur.
• Diapositives à faire défiler : combien d'images avancent par pas.
• Glissière centrale, curseur de préhension, mode sans glissement : options pour centrer la diapositive active, afficher un curseur de saisie et faire défiler la traînée à écoulement libre.
• Boucle: exécutez le carrousel comme une boucle sans fin au lieu de vous arrêter à la dernière image.

Utilisez la disposition Coverflow pour un effet 3D #

Commutateur Disposition à Débit de couverture et les diapositives s'inclinent en pile 3 D, avec l'image active à plat au centre et les voisins inclinés vers l'arrière. Un Effet de couverture le contrôle apparaît afin que vous puissiez affiner la profondeur et la rotation. Il convient aux sections de photographie et de portfolio où le curseur lui-même fait partie de la conception.

Style le carrousel #

Le Style tab se divise en quatre sections : Articles de carrousel, Boîte lumineuse, Navigation, et Modèles. Ensemble, ils couvrent l'apparence des diapositives, de la fenêtre contextuelle et des flèches.

Articles de carrousel #

Cette section stylise les diapositives de l'image Elle a des états Normal, Hover, et Actif, de sorte que vous pouvez faire la diapositive centrée se démarquer du reste.

• Arrière-plan, type de bordure, rayon de bordure, ombre de boîte : cadrage standard pour chaque diapositive Border Radius arrondit les coins de l'image.
• Rembourrage et espace d'article : espace à l'intérieur de chaque glissière et espace entre les glissières.
• Mode Ombre et Opacité : profondeur et transparence supplémentaires pour les diapositives inactives.

Lightbox, superposition et légendes #

Le Boîte lumineuse la section stylise l'icône d'aperçu qui se trouve sur chaque image et la superposition derrière elle, ainsi que le texte de la légende.

• Icône d'aperçu personnalisé : remplacez l'icône de zoom par défaut et définissez sa couleur, sa couleur de survol, sa taille et sa position avec Icon Gap sur Gauche et Haut.
• Superposition : ajoutez une teinte d'arrière-plan sur l'image, ce qui vous aide lorsque vous souhaitez que l'icône et la légende restent lisibles.
• Titre de la légende : typographie, arrière-plan, couleur et couleur de vol stationnaire pour les légendes que vous avez ajoutées dans la galerie.

Flèches de navigation #

Le Navigation la section Style contrôle l'apparence des flèches, avec les états Normal et Hover.

• Couleur et arrière-plan : couleur de l'icône de flèche et le bouton derrière.
• Type de bordure, rayon de bordure, rembourrage, taille : façonner et dimensionner les boutons fléchés, y compris les boutons ronds avec un rayon complet.
• Ombre de boîte et décalage : ajoutez de la profondeur et poussez les flèches vers l'intérieur ou vers l'extérieur avec le décalage horizontal.

Le résultat sur la page #

Publiez ou prévisualisez et le carrousel fonctionne en direct : il parcourt automatiquement les images, boucle si vous l'avez allumé et ouvre chacune dans la boîte à lumière en clic. Votre style se poursuit, des diapositives bordées arrondies aux boutons fléchés personnalisés.

Cas d'utilisation courants #

• Photographie et portfolio galeries où le lightbox permet aux visiteurs de visualiser des photos en taille réelle.
• Curseurs d'image de produit sur une landing page, avec lecture automatique attirant le regard.
• Logo ou bandes partenaires utilisation de plusieurs diapositives par vue et d'une boucle.
• Photos de témoignages ou d'événements dans un bloc compact et glissable.
• Curseurs de flux de couverture Hero pour une section design-forward.

Conseils pour travailler avec le Carrousel d'images #

• Faites correspondre la résolution de l'image à la taille de la diapositive. Servir des fichiers pleine grandeur dans de petites diapositives ralentit la page ; Moyen ou grand est généralement beaucoup.
• Gardez la vitesse de lecture automatique confortable. Environ 4000 à 6000 ms donnent aux gens le temps de regarder sans se sentir pressés.
• Activez Pause sur Hover avec lecture automatique. Cela empêche le curseur de glisser sous quelqu'un qui lit une légende.
• Cacher les flèches sur mobile. Le glissement est le geste naturel sur les écrans tactiles, donc les flèches ne sont souvent que du fouillis.
• Utilisez l'état Actif pour mettre en surbrillance la diapositive centrale. Une bordure subtile ou une opacité totale sur la lame active guide l'œil.

Foire aux questions #

Envelopper #

Le Widget Carrousel d'images crée un curseur d'image Elementor complet sans plugin séparé : chargez une galerie, définissez la lecture et la boucle automatiques, allumez la boîte à lumière et stylisez les diapositives et les flèches pour qu'elles correspondent à votre conception. Pour d'autres façons d'afficher des images, regardez le Galerie Slider et Galerie Filtrable widgets. Parcourir le complet Widgets et extensions Master Addons pour voir ce qui est inclus d'autre.