カルーセルで右側の影の設定が表示されない問題を解決する方法

右側の影が表示されない問題について

場合によっては、 カルーセル要素 右側の影が隠れたり、切れたりする場合があります.

これは、カルーセルコンテナが頻繁に以下を使用するためです。

オーバーフロー：隠されました;

この設定により、コンテンツがコンテナの境界外に拡張されることを防ぎます。結果として、次のようになります。

• 影の 右側 表示されない場合があります
• 端に近い要素が切り取られて表示される場合があります
• 光沢や奥行きなどのデザイン効果が壊れて見える場合があります

解決策は、オーバーフロー設定を更新して、影が正しく表示されるようにすることです。

以下のような場合に、この問題が発生している可能性があります。

• 左側の影は正常に表示されます
• 右側の影が欠落しているか、部分的に切れています
• エディター内では影が表示されますが、ライブページには表示されません。
• カルーセルの端付近に配置すると、影の効果が消えます。

これらのいずれかに該当する場合は、以下の手順に従ってください。

カルーセルのオーバーフロー設定を修正する方法

この問題は、カルーセル要素に簡単なカスタムCSSルールを追加することで解決できます。

ステップ1：GemPagesエディターでページを開きます

あなたから GemPagesダッシュボード影の問題が発生するカルーセルを含むページを開きます。

動画内で カルーセル要素 右側の影が正しく表示されていません。

ステップ2：カルーセルクラス名を見つける

右クリックして カルーセル要素.

その後：

• 選択 カスタムコード

• CSSパネルが開きます
• 最初の行を見てください。これがあなたのカルーセルクラスです。

このクラス名をコピーしてください。次のステップで使用します。

ステップ3：カスタムオーバーフローコードを追加する

以下のコードをカスタムコードパネルに貼り付けてください。

その後：

置換：

#gp-carousel-class-of-carousel

を使用して：

あなたの実際のカルーセルクラス。

例えば、Carousel クラスが次のようになっている場合： .gp-carousel-abc123

最終的なコードは次のようになります。

.gp-carousel-abc123 {

   オーバーフロー: 表示可能;

}

コードを追加した後：

• 詳しくはこちら Save
• プレビューを更新する
• 右側の影が見えるようになったか確認してください。