Page cover

Carrousel

Présentez plusieurs éléments dans un diaporama attrayant et interactif avec le composant Carousel. Ce composant dynamique vous permet d'afficher des images, du texte et d'autres contenus dans un format visuellement plaisant, ce qui le rend parfait pour mettre en avant des éléments phares, présenter des offres de produits ou raconter des histoires visuelles.

1 : Choisissez votre source de données

Décidez comment vous souhaitez remplir le carousel avec des données. Vous avez trois options :

2 : Effectuez les mappages de données (si vous utilisez une variable ou une requête)

Connectez les attributs du carousel aux champs correspondants de votre source de données. Cela garantit que les bonnes informations sont affichées pour chaque élément du carousel.

  • https://docs.google.com/gview?embedded=true&url=[votre URL PDF] Si vous mettez en avant des produits, vous pouvez mapper :

    • Titre : au champ « Nom du produit ».

    • Description : au champ « Description du produit ».

    • Image : au champ « Image du produit ».

3 : Configurez la mise en page

Contrôlez combien d'éléments sont affichés en même temps et comment ils sont disposés. Vous pouvez spécifier :

  • Éléments par panneau : Le nombre d'éléments à afficher dans chaque diapositive du carousel.

  • Comportement réactif : Configurez des mises en page différentes pour les petits, moyens et grands appareils afin d'assurer une visualisation optimale sur toutes les tailles d'écran.

4 : Configurez d'autres options

Maintenant que les bases de votre carousel sont en place, il est temps de le peaufiner avec des options supplémentaires ! Dans cette étape, vous affinerez le fonctionnement et l'apparence du carousel pour qu'ils correspondent à votre vision. Que vous souhaitiez un design épuré et minimaliste ou une expérience interactive, ces réglages vous permettent de contrôler les détails.

Voici ce que vous pouvez faire :

  • Masquer la navigation : Supprimez les flèches de navigation pour un aspect plus épuré.

  • Rendre les éléments cliquables : Permettez aux utilisateurs d'interagir avec les éléments du carousel en les rendant cliquables.

  • Configurer les indicateurs : Personnalisez l'apparence et la position des indicateurs qui montrent la diapositive en cours.

  • Ajouter des actions : Incluez des boutons ou des liens dans chaque élément du carousel pour déclencher des actions ou naviguer vers d'autres pages.

Ces options vous permettent de créer un carousel convivial et visuellement attrayant. Faisons-en quelque chose qui vous ressemble !

  • Présenter plusieurs éléments : Affichez une collection d'éléments dans un espace limité.

  • Améliorer l'aspect visuel : Créez une expérience utilisateur engageante et interactive.

  • Mettre en avant du contenu sélectionné : Attirez l'attention sur des éléments ou promotions importants.

  • Améliorer la navigation : Guidez les utilisateurs à travers une série d'éléments ou d'étapes liées.

Exemples d'utilisation :

  • Vitrine de produits : Affichez des produits en vedette ou des nouveautés.

  • Galerie d'images : Créez une galerie visuelle d'images ou de photos.

  • Témoignages clients : Présenter des retours positifs de clients satisfaits.

  • Promotions d'événements : Mettez en avant des événements à venir ou des offres spéciales.

En intégrant le composant Carousel dans vos composants dynamiques, vous pouvez créer des interfaces utilisateur dynamiques et visuellement attrayantes qui mettent efficacement en valeur votre contenu et captivent vos utilisateurs.

Mis à jour

Ce contenu vous a-t-il été utile ?