Widget de carrousel d'image d'élémenteur : curseur gratuit avec Lightbox et Coverflow
Le widget d'images du carrousel dans les add-ons maîtres transforme une galerie WordPress en un curseur dispersant. Vous choisissez les images, choisissez le nombre d'affichages sur le bureau, la tablette et le téléphone, et ajoutez une lecture automatique, une boucle infinie, une lightbox et une mise en page 3D Coverflow si vous en souhaitez une. Chaque diapositive peut être stylée dans son état normal, plané et actif, et les flèches, points et barre de progression suivent votre marque. Il fonctionne pour les portefeuilles, les photos de produits, les visites d'hôtels et de propriétés et les logos des clients.
Dispositions de Coverflow et de carrousel
Choisissez une disposition de carrousel ou de flux de couverture dans les paramètres du carrousel. Diapositives par colonne Définit le nombre de diapositives affichées à la fois, de 1 à 6, avec des valeurs distinctes pour le bureau, la tablette et le mobile, de sorte que le carrousel soit réactif sans CSS supplémentaire. Diapositives de défilement Définit la distance parcourue par chaque étape. La boucle rend le carrousel infini, et la lecture automatique, la glissade centrale, le curseur de saisie et le glissement du mode de glissement changent leur façon de bouger. Allumez l'observateur lorsque le carrousel est assis à l'intérieur d'une languette ou d'un accordéon.
- Réactif : un nombre différent de diapositives sur ordinateur, tablette et mobile.
- Mouvement : vitesse de lecture automatique, vitesse d'animation, pause en survol et boucle infinie.
- Hauteur : la hauteur automatique suit la plus haute glissière visible ou définissez une hauteur personnalisée pour le carrousel.
Styles de diapositives dans les états Normal, Survol et Actif
La section Objets du carrousel associe la boîte autour de chaque image dans trois états. Définissez un arrière-plan, une bordure, une ombre et un remplissage pour la normale, la survol et l'actif, ainsi que l'écart d'élément entre les diapositives et l'opacité. Utilisez l'état actif pour faire ressortir le toboggan central de ses voisins.
- Survol : un ascenseur d'ombre ou un changement de couleur lorsque le pointeur est sur une diapositive.
- Active : une bordure ou un arrière-plan différent sur la diapositive actuelle.
- Cadre : rayon de bordure, ombre de boîte et rembourrage sur chaque élément.
Carrousel d'images avec lightbox, flèches, points et barre de progression
La navigation peut être des flèches, des points, des flèches et des points, des flèches et des fractions, ou une barre de progression, et vous pouvez ajouter une barre de défilement glamour à l'un d'eux. Les flèches prennent des icônes personnalisées et s'assoient à l'intérieur ou à l'extérieur du carrousel. La Lightbox est activée par défaut et ouvre chaque taille pleine image avec Fancybox ou la Lightbox Elementor. Le titre de l'image et la légende de sa bibliothèque multimédia apparaissent dans la lightbox, et vous pouvez créer des styles, ainsi que l'icône d'aperçu et la superposition.
- Flèches : couleur, taille, arrière-plan et décalage horizontal, avec une option pour les masquer sur mobile.
- Compteurs : une fraction telle que 1/8, ou une barre de progression en haut ou en bas.
- Lightbox : Fancybox ou Elementor, avec une icône et une superposition personnalisées.
Carrousel d'images Coverflow sans Elementor Pro
Dans Elementor, l'effet Coverflow appartient au widget Media Carousel, qui fait partie d'Elementor Pro. Le carrousel d'images Master Addons l'a comme option de mise en page. Réglez la disposition sur Coverflow et le slide central fait face vers l'avant pendant que ses voisins se détournent. Le popover effet de couverture a quatre curseurs : rotation, étirement, modificateur et profondeur. Le carrousel ci-dessous est en direct, alors faites-le glisser ou utilisez les points.
Pour les styles Flip, Arc et Orbite, consultez notre guide de la Carrousel Elementor 3D.
Carrousel d'images d'élémentateur vs Carrousel d'images d'addons principaux
Le carrousel d'images d'Elementor Own est suffisant pour un curseur de base avec des légendes sur les diapositives. Choisissez le modèle Addons Master un lorsque vous avez besoin d'une disposition de couverture, d'une barre de progression ou d'un compteur de fractions, de fantaisie ou de style séparé pour la glissière active.
| Carrousel d'images d'élémentateur | Carrousel d'images Master Addons | |
|---|---|---|
| Prix | Gratuit | Gratuit |
| Diapositives par vue par appareil | Oui | Oui |
| Dispositions | Glisser ou s'estomper | Carrousel ou coverflow 3D |
| Légendes | Sur la diapositive : titre, légende ou description | Dans la lightbox : titre et légende de l'image |
| navigation | Flèches et points | Flèches, points, balles dynamiques, fraction, barre de progression et barre de défilement |
| Boîte lumineuse | Boîte à lumière d'élément | Fancybox ou Elementor, avec une icône d'aperçu personnalisé et une superposition |
| Style de diapositives | Basique | États normaux, stationnaires et actifs |
| Liens | Une URL personnalisée pour toutes les diapositives | Aucun champ de lien, les images sont ouvertes dans la lightbox |
Ce que le widget Carrousel d'image peut et ne peut pas faire
Une liste rapide de ce qui est dans le widget et de ce qui ne l'est pas.
| Caractéristique | Carrousel d'images |
|---|---|
| Lightbox (Fancybox ou Elementor) | Oui |
| Disposition de la couverture | Oui |
| Diapositives par appareil, 1 à 6 | Oui |
| Flèches, points, fraction, barre de progression et barre de défilement | Oui |
| Lecture automatique et boucle infinie | Oui |
| Style normal, en survol et en glissière active | Oui |
| Sous-titre dans la lightbox (titre de l'image et légende) | Oui |
| Légende sur la diapositive | Non |
| Lien par image | Non |
| Plusieurs lignes | Non |
| Diapositives vidéo | Non |
| Navigation sur les vignettes | Non, voyez Galerie Slider (Pro) |
Exemples de carrousel d'images
Ces trois carrousels sont des widgets en direct. Cliquez sur une image pour ouvrir la lightbox. Plus de mises en page sont dans la visionneuse de démonstration sous eux.
Visite de l'hôtel, trois à travers
Trois diapositives sur le bureau, deux sur tablette et une sur mobile, avec des flèches sur les images.
Bande de menus avec une barre de progression
Lecture automatique avec le mode de glissement libre et une barre de progression à la place des points.
Comment ajouter un carrousel d'images dans Elementor
Pour une procédure pas à pas plus longue avec des captures d'écran, lisez comment créer un carrousel d'images dans Elementor.
- Installez le plugin gratuit Master Addons et modifiez votre page avec Elementor.
- Recherchez dans le panneau du widget Image Carousel et faites-le glisser dans un conteneur.
- Cliquez sur le champ de la galerie, choisissez vos images et définissez la résolution de l'image.
- Définissez le nombre de diapositives affichées par appareil, puis activez la lecture automatique, la boucle et la boîte à lumière si vous le souhaitez.
- Choisissez Carrousel ou Coverflow, stylisez les diapositives et les flèches et publiez.
Carrousels associés : Curseur de logo, Slider d'équipe, Galerie Slider (Pro) et le blog Le mode carrousel de Widget. Pour les animations de survol sur une seule image, voir Effets de survol d'image.
Pour une grille d'images filtrable, voir Galerie d'images filtrables.
Foire aux questions pour le carrousel d'images
Quel est le principal avantage par rapport au carrousel d'images de base d'Elementor ?
Le carrousel d'image d'Elementor gère bien un curseur simple : sous-titres, une lightbox, la lecture automatique et les diapositives par appareil. Les modules complémentaires Master ajoutent une disposition de couverture 3D, une fraction, une barre de progression et une navigation dans la barre de défilement, un choix de Fancybox ou la lightbox Elementor avec une icône de prévisualisation personnalisée, un style pour les diapositives normales, de survol et actives, et une option d'observateur pour les carrousels à l'intérieur des onglets ou des accordéons.
Comment conserver toutes les images du carrousel à la même hauteur ?
Téléchargez des images avec le même rapport d'aspect, car le widget affiche chaque image à sa propre forme. Si vous ne pouvez pas les recadrer en premier, donnez au widget une classe CSS et définissez une hauteur fixe avec Object-Fit : Couverture sur les images de la diapositive. La hauteur personnalisée définit la hauteur du carrousel lui-même et ne recadre pas les images.
Puis-je l'utiliser pour un curseur de logo avec des niveaux de gris à colorer en vol stationnaire ?
Oui. Téléchargez vos images de logo. Dans l'onglet Eléments du carrousel, définissez l'opacité d'état normal ou utilisez un filtre CSS pour les rendre en niveaux de gris. Ensuite, dans l'état de survol, replacez l'opacité sur 1 et retirez le filtre. ou utilisez le Curseur de logo widget, qui est construit pour les logos des clients.
Le carrousel peut-il défiler en continu ?
Il se déplace d'une seule étape à la fois, avec ou sans lecture automatique. Pour une bande qui glisse sans s'arrêter, construisez un chapiteau. notre Guide du chapiteau des éléments montre trois façons de le faire.
Quelle est la différence entre un carrousel et un curseur ?
Un curseur montre une diapositive à la fois, généralement sur toute la largeur. Un carrousel en montre plusieurs à la fois sur une piste. Ce widget fait les deux : définissez les diapositives par colonne sur 1 et fonctionne comme un curseur. Il y a plus dans Carrousel vs curseur.
Chaque image peut-elle avoir son propre lien ?
non Les images s'ouvrent dans la lightbox et le widget n'a pas de champ de lien. Le carrousel d'images d'Elementor a une option d'URL personnalisée, mais il s'applique à chaque diapositive. Pour un lien par élément, utilisez le Curseur de logo.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
