Ajouter un carrousel.

Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page

Utilisez l’élément de mise en page Carrousel quand vous voulez que du contenu se relaie au même endroit, comme des citations, des offres ou des annonces. Vous obtenez des diapositives qui avancent toutes seules, avec une pastille par diapositive. Contrairement au Carrousel d’images, chaque diapositive contient n’importe quels éléments : texte, images, boutons et plus. L’exemple construit un défilement de citations d’étudiants.

Un défilement de citations d’étudiants sur une bande gris clair montrant la citation d’Aisha Khan, avec une barre pour chacune de ses trois diapositives

  1. Survolez la colonne et cliquez sur + dans sa barre de contrôle pour ouvrir le sélecteur d’éléments.
  2. Dans l’onglet Mise en page, cliquez sur Carrousel.
  3. Ses réglages s’ouvrent d’abord. Cliquez sur Save pour garder les défauts. Le carrousel apparaît avec une diapositive vide.
  4. Cliquez sur + dans la diapositive et ajoutez du contenu, comme un élément Texte.
  5. Pour ajouter une diapositive, survolez le carrousel et cliquez sur Add slide dans sa barre de contrôle. Cliquez sur la pastille de la diapositive sous le carrousel pour l’ouvrir, puis remplissez-la de la même façon.

Ce que vous voyez

La première diapositive s’affiche avec une barre par diapositive en dessous. Toutes les 5 secondes, la suivante entre, et après la dernière, la première revient. Les visiteurs peuvent cliquer sur une barre pour sauter à une diapositive ou balayer sur un écran tactile. Chaque diapositive prend la hauteur de la plus haute, donc le contenu sous le carrousel ne saute pas.

Ouvrez les réglages depuis Plus > Paramètres dans la barre de contrôle Carrousel. Le panneau General contient le minutage.

Réglage Rôle Défaut
Frames per slide Combien de diapositives s’affichent côte à côte, de 1 à 10. Les écrans étroits en montrent moins, jusqu’à une sur téléphone 1
Disable auto-play Arrête l’avancée automatique des diapositives Désactivé
Auto-play interval Temps entre les diapositives, de 1000 à 20000 millisecondes 5000
Stop on hover Suspend le défilement auto quand le pointeur est sur le carrousel Désactivé
Dots navigation Dans le panneau Dots : affiche une pastille par diapositive Activé
Next/Previous Dans le panneau Next/Previous : affiche des boutons flèches Désactivé

Pastilles et flèches

Avec Dots navigation activé, le panneau Dots offre aussi :

  • Dots orientation : Outside slider (en dessous) ou Inside slider
  • Dot shape : Bar, Circle, Square ou Triangle
  • Active dot transformation : None, Grow taller, Grow wider ou Scale up
  • Dot color et Active dot color

Avec Next/Previous activé, le panneau Next/Previous offre aussi :

  • Orientation : Outside slider ou Inside slider
  • Dot shape : le bouton derrière chaque flèche, No background, Circle, Square ou Bar
  • Icon color, Icon hover color, Background color et Background hover color
  • Outside navigation position : Adjacent, Top center, Top left, Top right, Bottom center, Bottom left ou Bottom right

Idées de diapositives

  • Défilement de témoignages : mettez un Block quote avec la citation et un élément Texte avec le nom sur chaque diapositive. Gardez Dots navigation activé et Next/Previous désactivé, et réglez Auto-play interval sur 7000 pour que les visiteurs finissent de lire.
  • Carrousel héros : ouvrez Plus > Paramètres d’une diapositive et choisissez une photo comme Background image dans son panneau Style. Ajoutez un élément Texte avec le titre et un Bouton. Activez Stop on hover pour que les visiteurs lisent et cliquent.

Si rien ne s’affiche

  • Il n’y a pas de pastilles sous le carrousel. Les pastilles ne s’affichent qu’avec deux diapositives, et seulement avec Dots navigation activé. Cliquez sur Add slide, ou activez Dots navigation dans le panneau Dots.
  • La nouvelle diapositive ne s’affiche pas après Add slide. Les nouvelles diapositives s’ajoutent à la fin et restent cachées jusqu’à leur ouverture. Cliquez sur la dernière pastille sous le carrousel.
  • Les diapositives ne défilent pas toutes seules. Disable auto-play est activé. Désactivez-le dans le panneau General des réglages du carrousel.
  • Il n’y a pas de flèches. Next/Previous est désactivé par défaut. Activez-le dans le panneau Next/Previous.
  • Carrousel manque dans l’onglet Mise en page du sélecteur. Votre profil d’utilisateur DXPR Builder l’exclut. Un administrateur coche Carousel sous Elements dans votre profil à /admin/dxpr_studio/dxpr_builder/profile.

Et ensuite ?