So beheben Sie das Problem, dass die rechte Schatteneinstellung im Karussell nicht angezeigt wird

Problem mit dem nicht angezeigten rechten Schatten

In einigen Fällen, wenn Sie Schatteneffekte innerhalb eines Karussell-Element, hat das Der Schatten auf der rechten Seite kann verdeckt oder abgeschnitten sein..

Dies geschieht, weil der Carousel-Container häufig Folgendes verwendet:

Überlauf versteckt;

Diese Einstellung verhindert, dass Inhalte über die Grenzen des Containers hinausgehen. Daraus folgt:

• Schatten auf dem rechte Seite möglicherweise nicht sichtbar
• Elemente in der Nähe des Randes können abgeschnitten erscheinen.
• Designeffekte wie Glühen oder Tiefe können fehlerhaft aussehen.

Die Lösung besteht darin, die Überlauf-Einstellung zu aktualisieren, damit Schatten korrekt angezeigt werden.

Dieses Problem könnte auftreten, wenn:

• Der linke Schatten wird normal angezeigt
• Der rechte Schatten fehlt oder ist teilweise abgeschnitten.
• Schatten erscheinen im Editor, aber nicht auf der Live-Seite.
• Schatteneffekte verschwinden, wenn sie in der Nähe des Randes eines Karussells platziert werden.

Wenn einer dieser Punkte zutrifft, befolgen Sie die nachstehenden Schritte.

So beheben Sie das Problem mit der Überlaufeinstellung im Karussell

Dieses Problem lässt sich beheben, indem Sie Ihrem Carousel-Element eine einfache benutzerdefinierte CSS-Regel hinzufügen.

Schritt 1: Öffnen Sie Ihre Seite im GemPages-Editor.

Von deiner GemPages DashboardÖffnen Sie die Seite, die das Karussell enthält, auf der das Schattenproblem auftritt.

Suchen Sie den Karussell-Element wo der rechte Schatten nicht korrekt angezeigt wird.

Schritt 2: Ermitteln Sie den Namen der Karussellklasse

Klicken Sie mit der rechten Maustaste direkt auf das Karussell-Element.

Dann:

• Auswählen Benutzerdefinierter Code

• Das CSS-Panel wird sich öffnen
• Schau dir die erste Zeile an – das ist deine Carousel-Klasse.

Kopieren Sie diesen Klassennamen. Sie benötigen ihn im nächsten Schritt.

Schritt 3: Benutzerdefinierten Überlaufcode hinzufügen

Fügen Sie folgenden Code in das Feld „Benutzerdefinierter Code“ ein:

Dann:

Ersetzen:

#gp-carousel-class-of-carousel

Mit:

Deine eigentliche Carousel-Klasse.

Wenn Ihre Carousel-Klasse beispielsweise wie folgt aussieht: .gp-carousel-abc123

Ihr endgültiger Code sollte wie folgt aussehen:

.gp-carousel-abc123 {

   Überlauf: sichtbar;

}

Nach dem Hinzufügen des Codes:

• Klicken Sie auf Gespeichert
• Vorschau aktualisieren
• Prüfen Sie, ob der rechte Schatten jetzt sichtbar ist.