Par défaut, Navigation par carrousel dans GemPages s'affiche comme indicateurs à pointsBien que les points fonctionnent bien dans de nombreux cas, certains utilisateurs préfèrent utiliser boutons fléchés gauche et droite pour une navigation plus facile et une expérience utilisateur plus moderne.
Grâce à un simple extrait de code CSS personnalisé, vous pouvez repositionner les flèches de navigation et créer une mise en page plus épurée qui remplace la navigation par points par défaut. Cet article vous guidera étape par étape sur la façon de Remplacer les points du carrousel par des flèches de navigation dans GemPages Utilisation de code personnalisé.
Tutoriel étape par étape : Comment remplacer les points du carrousel par des boutons de navigation
Suivez attentivement ces étapes pour appliquer la disposition des flèches de navigation.
Étape 1 : Cliquez avec le bouton droit sur l’élément du carrousel
Ouvrez votre page dans le Éditeur GemPages.
Puis:
- Localisez le Élément de carrousel
- Faites un clic droit directement sur le carrousel
- Sélectionner Code personnalisé
Cela ouvrira la Panneau de code personnalisé CSS.
Étape 2 : Copiez la classe Carousel de la première ligne
Dans le panneau Code personnalisé :
- Regardez l' première ligne, l en-tete,
- Vous verrez le Classe Carrousel
Copiez ce nom de classe. Vous l'utiliserez à l'étape suivante.
Étape 3 : Coller le code du bouton de navigation
Collez le code CSS suivant dans le panneau Code personnalisé :
.carouselID .gem-slider-previous {
bas : -40px !important;
haut : auto !important ;
gauche : calc(50% - 40px) !important ;
}
|
.carouselID .gem-slider-next {
bas : -40px !important;
haut : auto !important ;
droite : calc(50% - 40px) !important ;
}
|
Puis:
Remplacer:
carrouselID
Avec:
Votre classe Carousel réelle que vous avez copiée à l'étape 2.
Après ça:
- Cliquez à nouveau Enregistrer
- Actualiser l'aperçu
- Vérifiez la disposition de navigation
Étape 4 : Cliquez sur Enregistrer pour appliquer les modifications
Une fois le code collé :
- Cliquez à nouveau Enregistrer
- Actualisez l'aperçu de la page si nécessaire.
La navigation de votre carrousel devrait maintenant afficher des boutons fléchés positionnés sous le curseur, rendant la navigation plus claire et plus facile à utiliser.
Merci pour vos commentaires