如何调整Owl Carousel v14.0.1的上/下页按钮位置

首先，你拒绝引入jQuery的做法完全正确——Angular本身提供了完整的DOM操作和样式控制能力，引入jQuery不仅会增加项目体积，还可能和Angular的变更检测机制产生冲突，属于冗余依赖。

接下来直接用CSS实现你要的效果：Owl Carousel会自动生成带有owl-prev、owl-next类的导航按钮，父容器是owl-nav，我们可以通过定位和样式覆盖来调整它们的位置和外观。

具体CSS代码 #

如果你的组件启用了视图封装（View Encapsulation），需要用::ng-deep来穿透样式（或者把这段样式放到全局样式文件比如styles.css里）：

/* 给轮播容器设置相对定位，作为按钮绝对定位的参照 */
::ng-deep .owl-carousel {
  position: relative;
}

/* 调整导航容器布局，固定到顶部并两端对齐 */
::ng-deep .owl-nav {
  position: absolute;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 自定义上一页按钮样式，提升辨识度 */
::ng-deep .owl-prev {
  background: rgba(0,0,0,0.5) !important;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  font-size: 24px !important;
}

/* 自定义下一页按钮样式，提升辨识度 */
::ng-deep .owl-next {
  background: rgba(0,0,0,0.5) !important;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  font-size: 24px !important;
}

/* 可选：优化按钮hover效果 */
::ng-deep .owl-prev:hover,
::ng-deep .owl-next:hover {
  background: rgba(0,0,0,0.7) !important;
}

代码说明 #

• position: relative：给轮播容器设置相对定位，让内部的绝对定位按钮以它为参照基准。
• owl-nav设置为absolute+top:10px，将导航栏固定在轮播顶部，通过flex布局实现左右按钮分别对齐两端。
• 调整owl-prev和owl-next的宽高、背景色、字体大小，解决默认按钮尺寸小、辨识度低的问题，!important用来强制覆盖组件默认样式。
• 如果不想用::ng-deep，可以把样式移到全局样式文件，无需穿透即可生效。

补充：关于视图封装 #

如果你的组件使用默认的ViewEncapsulation.Emulated，组件内的样式仅作用于当前组件DOM，而Owl Carousel生成的导航按钮属于组件内部子DOM，因此需要::ng-deep穿透样式。若觉得::ng-deep不够优雅，也可在组件元数据中设置encapsulation: ViewEncapsulation.None，但此时组件内样式会变为全局样式，需注意命名冲突。

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