Bulma Carousel 如何调大侧边导航箭头尺寸避免用户错过

你可以通过自定义CSS覆盖组件默认样式实现需求，操作方案如下：

核心实现代码 #

在你项目的全局自定义样式文件中添加以下代码：

/* 适配所有轮播组件的箭头放大 */
.slider-navigation-previous,
.slider-navigation-next {
  /* 调整箭头按钮的外框尺寸 */
  width: 60px !important;
  height: 60px !important;
  /* 调整箭头图标本身的显示大小 */
  font-size: 32px !important;
  /* 如果你的箭头是SVG格式，可启用以下配置 */
  /*
  svg {
    width: 32px !important;
    height: 32px !important;
  }
  */
  /* 可选配置：调整箭头距离轮播侧边的间距，避免贴边不易点击 */
  margin: 0 15px;
  /* 可选配置：增加半透明白背景，提升箭头和轮播内容的对比度 */
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 50% !important;
}

/* 可选配置：hover时放大效果，强化交互反馈 */
.slider-navigation-previous:hover,
.slider-navigation-next:hover {
  transform: scale(1.15);
  transition: all 0.2s ease-in-out;
}

常见调整说明 #

• 如果只需要修改单个轮播的箭头尺寸，给目标轮播容器添加自定义类名（比如custom-large-arrow），然后将选择器修改为.custom-large-arrow .slider-navigation-previous即可
• 如果你自定义样式的引入顺序晚于Bulma Carousel的样式文件，可以去掉代码里的!important标记
• 你可以根据业务需求自由调整尺寸数值，直到箭头大小符合预期
• 如果样式不生效，可以通过浏览器开发者工具的元素选择功能，选中箭头元素获取其实际类名，替换上述代码中的选择器即可

效果参考 #

内容的提问来源于stack exchange，提问作者nivniv