如何使用自定义代码隐藏轮播图箭头

轮播图箭头可以帮助访客在轮播图元素内的不同幻灯片之间导航。但是，在某些情况下，您可能需要隐藏左箭头、右箭头或两者都隐藏，以获得更简洁的视觉体验。

本文将向您展示如何使用简单的自定义 CSS 代码在 GemPages 中隐藏轮播图箭头，无需任何编码经验。

何时应该隐藏旋转木马箭头？

以下是一些隐藏轮播图箭头可以改善店铺设计和用户体验的常见用例：

1. 创建更简洁的移动端布局

在较小的屏幕上，箭头可能会占用过多空间或遮挡内容。隐藏箭头可以让轮播图看起来更简洁，更易于浏览。

2. 使用自动播放代替手动导航

如果您的轮播图可以自动在项目之间滑动，访客可能就不需要手动导航箭头了。

3. 构建极简设计

有些品牌偏爱简洁现代的外观，不采用可见的导航控制。

4. 防止手动滑动

在某些促销版块或公告轮播中，您可能希望用户按固定顺序查看内容，而无需点击箭头。

5. 使用其他导航方式

您可能已经在使用：

• 点状导航
• 移动设备上的滑动操作
• 自动滚动功能

在这种情况下，箭头可能变得没有必要。

如何在 GemPages 中隐藏轮播箭头

步骤 1：选择轮播元素

在 GemPages 编辑器中，单击包含要隐藏的箭头的轮播元素。

步骤 2：打开自定义代码面板

右键单击轮播元素，然后选择 定制化.

自定义代码面板将会出现。

步骤 3：添加自定义 CSS 代码

1. 隐藏左箭头

将以下代码添加到“自定义代码”字段中：

.gTgcgeWuMC .gem-slider-previous{

 不透明度：0！重要；

 可见性：隐藏！重要；

}

2. 隐藏右箭头

添加以下代码即可隐藏右箭头：

.gTgcgeWuMC .gem-slider-after{

 不透明度：0！重要；

 可见性：隐藏！重要；

}

注意：

更换 .gTgcgeWuMC 使用您实际的轮播元素 ID。

您可以在自定义代码面板的顶部找到元素 ID。