Widget de carrousel d'image d'élémenteur : curseur gratuit avec Lightbox et Coverflow
Le widget Image Carousel dans Master Addons transforme une galerie WordPress en curseur glissable, et il est gratuit Vous choisissez les images, choisissez combien d'affichages sur le bureau, la tablette et le téléphone, et ajoutez la lecture automatique, une boîte à lumière et une disposition de flux de couverture 3 D si vous en voulez une Chaque diapositive peut être coiffée dans son état normal, planant et actif, et les flèches, points et légendes 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.
Mise en page avancée et contrôle du comportement
Prenez le contrôle total de l'apparence et du comportement de votre carrousel Choisissez une disposition Carrousel ou Coverflow Définissez des diapositives par colonne pour les affichages de type grille et définissez le nombre de diapositives à faire défiler Activez des fonctionnalités telles que la lecture automatique, la boucle, le mode central et même un curseur de saisie pour le glisser interactif L'option Observer garantit qu'elle fonctionne parfaitement à l'intérieur des onglets ou des accordéons.
- Dispositifs flexibles : créez des grilles à plusieurs rangées ou des curseurs horizontaux classiques avec un contrôle total sur les colonnes et le défilement.
- Interactions fluides : définissez la vitesse de lecture automatique, la vitesse d'animation et activez la pause sur le vol stationnaire pour un comportement convivial.
- Caractéristiques adaptatives intelligentes : utilisez la hauteur automatique pour éviter les espaces vides gênants et Observer pour le faire fonctionner dans des conteneurs cachés.
Stylez chaque partie, dans chaque État
Faites de votre carrousel une partie parfaite de votre conception Ne vous contentez pas de coiffer les images dans le style du conteneur pour chaque élément Définissez des arrière-plans, des bordures, des ombres et un remplissage uniques pour les états Normal, Hover et Actif Ajustez l'écart entre les éléments et l'opacité globale Ce niveau de détail vous permet de créer des cartes interactives, de mettre en évidence la diapositive active et de fournir un retour visuel clair lorsque les utilisateurs interagissent.
- Commentaires interactifs : concevez des effets de vol stationnaire distincts (comme un ombrage ou un changement de couleur) pour impliquer les visiteurs.
- Surlignement actif de la diapositive : faites ressortir la diapositive centrale actuelle avec une bordure ou un arrière-plan différent.
- Contrôle visuel complet : personnalisez le rayon de bordure, l'ombre de boîte et le rembourrage pour un cadrage parfait des articles.
Navigation et Lightbox intégré
Guidez vos visiteurs correctement sur votre carrousel d'images Concevez une navigation élégante Arrow avec des icônes, des couleurs, des arrière-plans et un positionnement personnalisés (à l'intérieur, à l'extérieur).Cachez-les sur mobile pour un look plus propre Ensuite, activez votre galerie avec une Lightbox intégrée Personnalisez l'icône d'aperçu, la superposition et la typographie des légendes Choisissez entre Fancybox et Elementor pour ouvrir les images dans une belle expérience de visualisation en plein écran.
- Flèches de navigation personnalisées : les flèches de style de zéro changent de couleur, de taille, d'arrière-plan et de décalage horizontal.
- Mobile-Optimized : choisissez de masquer la flèche sur mobile et comptez sur les gestes de balayage pour une sensation native.
- Premium Lightbox : Offrez une vue zoomée avec des icônes et des superpositions personnalisables, transformant le carrousel en une galerie complète.
Carrousel d'images d'élémentateur vs Carrousel d'images d'addons principaux
Les deux widgets sont gratuits La version d'Elementor suffit pour un curseur de base avec des légendes et des liens Choisissez-en un par les addons principaux lorsque vous avez besoin d'une disposition de flux de couverture, de rangées d'images ou de plus de contrôle sur la navigation et le style des diapositives.
| 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 |
| Plusieurs lignes | Non | Oui, avec des diapositives par colonne |
| 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 |
| Lier chaque image à une URL | Oui | Non, les images s'ouvrent dans la lightbox |
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 : Logo Slider, Slider d'équipe, Galerie Slider (Pro) et le Blog mode carrousel de Widget.
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'images gratuit d'Elementor gère bien un simple curseur : légendes, une boîte à lumière, une lecture automatique et des diapositives par appareil Master Addons ajoute une disposition de flux de couverture 3 D, des grilles multirangées avec des diapositives par colonne, une fraction, une barre de progression et une navigation par barre de défilement, un choix de Fancybox ou de la lightbox Elementor avec une icône d'aperçu personnalisée, un style pour les diapositives normales, en vol stationnaire et actives, et une option Observer pour les carrousels à l'intérieur des onglets ou des accordéons.
Si j'active 'Hauteur automatique', mes images seront-elles étirées ou recadrées ?
No. Auto Height ajuste la hauteur globale du conteneur du carrousel pour correspondre à la diapositive la plus haute actuellement visible Vos images conserveront leur rapport hauteur/largeur en fonction de vos autres paramètres (comme “Image Size”). Il empêche les hauteurs fixes de créer de grands espaces vides si vous avez des images d'orientations portrait/paysage variables.
Puis-je l'utiliser pour un curseur de logo avec des niveaux de gris à colorer en vol stationnaire ?
Absolument ! c'est un cas d'utilisation parfait Téléchargez vos images de logo Dans l'onglet Articles de carrousel, définissez l'état normal Opacité ou utilisez un filtre CSS pour les rendre en niveaux de gris Ensuite, dans l'état de Hover, remettez l'opacité à 1 et retirez le filtre Le style de vol stationnaire intégré rend cet effet facile sans code personnalisé Ou utilisez le Logo Slider widget, qui est construit pour les logos des clients.
Comment fonctionne le paramètre « Observateur », et quand dois-je l'utiliser ?
L'Observateur surveille les changements dans le conteneur du carrousel Activez-le (défini sur Oui) lorsque vous placez le carrousel à l'intérieur d'une languette, d'un accordéon ou d'un widget à bascule, ou n'importe où où il est initialement caché Cela garantit que le carrousel restitue et fonctionne correctement au moment où un utilisateur clique pour révéler son conteneur parent S'il est cassé à l'intérieur d'une languette, cela le corrige généralement.
Avoir plusieurs carrousels avec lecture automatique sur une seule page entraînera-t-il des problèmes de performances ?
Il peut, si vous en avez beaucoup (comme 15+).Chaque carrousel de lecture automatique est un élément mobile que le navigateur doit animer Pour de meilleures performances, limitez la lecture automatique à votre carrousel de héros le plus important Pour d'autres, pensez à laisser les utilisateurs défiler manuellement Aussi, utiliser des tailles d'image optimisées (par le biais des paramètres de Résolution d'image) est crucial pour la vitesse.
Puis-je lier des éléments de carrousel à différentes URL au lieu de simplement la lightbox ?
Pas avec ce widget Il ouvre les images dans une lightbox Si chaque diapositive a besoin de son propre lien, utilisez le Logo Slider(ou l'option de lien dans le propre Carrousel d'images d'Elementor.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
