Comment résoudre le problème d'affichage de l'ombre droite dans le carrousel

À propos du problème d'affichage de l'ombre droite

Dans certains cas, lorsque vous activez les effets d'ombre à l'intérieur d'un Élément de carrousel, le L'ombre du côté droit peut être masquée ou coupée..

Cela se produit car le conteneur Carousel utilise souvent :

débordement caché;

Ce paramètre empêche le contenu de dépasser les limites du conteneur. Par conséquent :

• Ombres sur le côté droit peut ne pas être visible
• Les éléments proches du bord peuvent paraître rognés.
• Des effets de design tels que la lueur ou la profondeur peuvent paraître défectueux.

La solution consiste à modifier le paramètre de débordement pour permettre un affichage correct des ombres.

Vous pouvez rencontrer ce problème si :

• L'ombre gauche s'affiche normalement
• L'ombre droite est manquante ou partiellement coupée.
• Les ombres apparaissent dans l'éditeur mais pas sur la page en direct.
• Les effets d'ombre disparaissent lorsqu'ils sont placés près du bord d'un carrousel.

Si l'une de ces situations s'applique, suivez les étapes ci-dessous.

Comment corriger le paramètre de débordement dans un carrousel

Vous pouvez résoudre ce problème en ajoutant une simple règle CSS personnalisée à votre élément Carousel.

Étape 1 : Ouvrez votre page dans l’éditeur GemPages

De ton Tableau de bord GemPagesOuvrez la page contenant le carrousel où se produit le problème d'ombre.

Localisez le Élément de carrousel où l'ombre droite ne s'affiche pas correctement.

Étape 2 : Trouver le nom de la classe Carousel

Faites un clic droit directement sur le Élément de carrousel.

Puis:

• Sélectionner Code personnalisé

• Le panneau CSS s'ouvrira.
• Regardez la première ligne : il s’agit de votre classe Carrousel

Copiez ce nom de classe. Vous l'utiliserez à l'étape suivante.

Étape 3 : Ajouter un code de débordement personnalisé

Collez le code suivant dans le panneau Code personnalisé :

Puis:

Remplacer:

#gp-carousel-classe-de-carousel

Avec:

Votre classe Carrousel actuelle.

Par exemple, si votre classe Carousel est : .gp-carousel-abc123

Votre code final devrait ressembler à ceci :

.gp-carousel-abc123 {

   débordement : visible ;

}

Après avoir ajouté le code :

• Cliquez à nouveau Enregistrer
• Actualiser l'aperçu
• Vérifiez si l'ombre droite est maintenant visible.