Comment masquer les flèches d'un carrousel à l'aide d'un code personnalisé

Les flèches du carrousel permettent aux visiteurs de naviguer entre les diapositives. Toutefois, dans certains cas, vous pouvez masquer la flèche gauche, la flèche droite, ou les deux, pour une expérience utilisateur plus épurée.

Cet article vous montrera comment masquer les flèches du carrousel dans GemPages à l'aide d'un simple code CSS personnalisé, sans aucune expérience en programmation requise.

Quand faut-il masquer les flèches du carrousel ?

Voici quelques cas d'utilisation courants où le fait de masquer les flèches du carrousel peut améliorer la conception de votre boutique et l'expérience utilisateur :

1. Créer une mise en page mobile plus propre

Sur les petits écrans, les flèches peuvent prendre trop de place ou masquer votre contenu. Les masquer permet d'afficher un carrousel plus clair et plus lisible.

2. Utilisez la lecture automatique au lieu de la navigation manuelle

Si votre carrousel fait défiler automatiquement les éléments, les visiteurs n'auront peut-être pas besoin des flèches de navigation manuelles.

3. Concevoir un design minimaliste

Certaines marques privilégient un style épuré et moderne, sans commandes de navigation visibles.

4. Empêcher le glissement manuel

Dans certaines sections promotionnelles ou certains carrousels d'annonces, vous pouvez souhaiter que les utilisateurs visualisent le contenu dans un ordre fixe sans avoir à cliquer sur des flèches.

5. Utilisez des méthodes de navigation alternatives

Vous utilisez peut-être déjà :

• Navigation par points
• Gestes de balayage sur mobile
• Fonctionnalité de défilement automatique

Dans ces cas-là, les flèches peuvent devenir inutiles.

Comment masquer les flèches du carrousel dans GemPages

Étape 1 : Sélectionnez l’élément du carrousel

Dans l'éditeur GemPages, cliquez sur l'élément Carousel contenant la flèche que vous souhaitez masquer.

Étape 2 : Ouvrez le panneau de code personnalisé

Cliquez avec le bouton droit sur l'élément Carrousel, puis sélectionnez Encadrement Sur Mesure.

Le panneau « Code personnalisé » s'affichera.

Étape 3 : Ajouter le code CSS personnalisé

1. Masquer la flèche gauche

Ajoutez le code suivant dans le champ Code personnalisé :

.gTgcgeWuMC .gem-slider-précédent{

 opacité : 0 ! important ;

 visibilité : cachée !important ;

}

2. Cachez la flèche de droite

Ajoutez ce code pour masquer la flèche vers la droite :

.gTgcgeWuMC .gem-slider-après{

 opacité : 0 ! important ;

 visibilité : cachée !important ;

}

À noter:

remplacer .gTgcgeWuMC avec l'identifiant réel de votre élément Carousel.

Vous trouverez l'identifiant de l'élément en haut du panneau Code personnalisé.