如何使用自定义代码将轮播图中的圆点替换为导航按钮（箭头）

默认情况下， GemPages中的轮播导航 显示为 点状指示器虽然点在很多情况下都能很好地工作，但有些用户更喜欢使用 左右箭头按钮 为了更方便的导航和更现代化的用户体验。

只需一段简单的自定义 CSS 代码片段，即可重新定位导航箭头，并创建一个更简洁的布局，以取代默认的点状导航。 本文将逐步指导您如何 在 GemPages 中将轮播图中的圆点替换为导航箭头 使用自定义代码。

逐步指南：如何将轮播图中的圆点替换为导航按钮

请仔细按照以下步骤应用导航箭头布局。

步骤 1：右键单击轮播元素

在 GemPages 编辑器.

然后：

• 找到 轮播元素
• 直接右键单击轮播图
• 选择 自定义代码

这将打开 CSS 自定义代码面板.

步骤 2：从第一行复制 Carousel 类

在“自定义代码”面板中：

• 看着那（这 第一行
• 你会看到的 旋转木马级

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

步骤 3：粘贴导航按钮代码

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

.carouselID .gem-slider-previous {

 底部：-40px !important;

 顶部：自动！重要；

 left: calc(50% - 40px) !important;

}

.carouselID .gem-slider-next {

 底部：-40px !important;

 顶部：自动！重要；

 右：calc(50% - 40px) !important;

}

然后：

更换：

轮播ID

附：

你在步骤 2 中复制的 Carousel 类。

之后：

• 点击 已保存
• 刷新预览
• 检查导航布局

第四步：点击“保存”以应用更改

粘贴完代码后：

• 点击 已保存
• 如有需要，请刷新页面预览。

您的轮播导航现在应该会在滑块下方显示箭头按钮，使导航更清晰、更易于使用。