如何解决轮播图中右侧阴影设置不显示的问题

关于右侧阴影不显示的问题

在某些情况下，当您在内部启用阴影效果时 轮播元素， 右侧阴影可能被隐藏或裁剪掉.

这是因为 Carousel 容器经常使用：

溢出：隐藏;

此设置可防止内容超出容器边界。因此：

• 阴影 右边 可能不可见
• 边缘附近的元素可能会出现裁剪痕迹。
• 发光或深度等设计效果可能会显得破损。

解决方法是更新溢出设置，以允许阴影正确显示。

如果您遇到以下情况，则可能会遇到此问题：

• 左侧阴影显示正常
• 右侧阴影缺失或部分裁剪
• 编辑器内部会出现阴影，但实时页面上不会出现阴影。
• 当放置在旋转木马边缘附近时，阴影效果会消失。

如果符合以下任何一项，请按照以下步骤操作。

如何修复轮播图中的溢出设置

您可以通过向轮播元素添加简单的自定义 CSS 规则来解决此问题。

步骤 1：在 GemPages 编辑器中打开您的页面

从你的 GemPages 仪表板打开出现阴影问题的轮播图所在的页面。

找到 轮播元素 右侧阴影显示不正确。

步骤 2：查找 Carousel 类名

直接右键单击 轮播元素.

然后：

• 选择 自定义代码

• CSS面板将打开
• 请看第一行——这是你的 Carousel 类

复制这个类名。下一步会用到它。

步骤 3：添加自定义溢出代码

将以下代码粘贴到“自定义代码”面板中：

然后：

更换：

#gp-carousel-class-of-carousel

附：

你的Carousel课程。

例如，如果你的 Carousel 类是： .gp-carousel-abc123

最终的代码应该如下所示：

.gp-carousel-abc123 {

   溢出：可见；

}

添加代码后：

• 点击 已保存
• 刷新预览
• 检查右侧阴影是否可见。