Angular17中ngx-owl-carousel-o导航按钮位置调整问题

你的配置逻辑无问题，导航按钮显示在底部是owl.theme.default.min.css的默认样式导致的，只需添加自定义CSS覆盖默认布局即可：

全局样式调整（推荐） #

在src/styles.css中添加以下代码：

/* 设置轮播容器为相对定位，作为导航按钮的定位基准 */
.owl-carousel {
  position: relative;
}

/* 重新定位导航按钮容器 */
.owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px; /* 根据需求调整左右内边距 */
  margin: 0; /* 清除默认外边距 */
}

/* 自定义导航按钮样式（可选） */
.owl-nav .owl-prev,
.owl-nav .owl-next {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

组件内样式调整（如需隔离样式） #

如果只想在当前组件生效，可在组件的CSS文件中添加代码，并启用::ng-deep：

::ng-deep .owl-carousel {
  position: relative;
}

::ng-deep .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin: 0;
}

/* 按钮样式同上 */

说明 #

• 默认主题中.owl-nav是块级元素，会在轮播内容下方排列，通过绝对定位将其移到轮播图的垂直中心位置。
• transform: translateY(-50%)确保导航按钮垂直居中。
• 按钮样式可根据你的UI需求自行调整颜色、大小等。

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