I’m using Angular 17 with ngx-owl-carousel-0 : 17.0.0 package.

I have my customOptions set as:

customOptions: OwlOptions = {
  loop: true,
  mouseDrag: false,
  touchDrag: false,
  pullDrag: false,
  dots: false,
  navSpeed: 700,
  margin:10,
  navText: ["<", ">"],
  responsive: {
    0: {
      items: 1
    },
    400: {
      items: 2
    },
    760: {
      items: 3
    },
    1000: {
      items: 4
    }
  },
  nav: true
}

and for the moment in my page I have the default template of:

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/92c952" alt="img 1" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/771796" alt="img 2" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/24f355" alt="img 3" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/d32776" alt="img 4" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/f66b97" alt="img 5" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/56a8c2" alt="img 6" />
    </div>
  </ng-template>
</owl-carousel-o>

and this is my output. You can see the navigation buttons at the bottom of the carousel, though not the end of the world, I cannot seem to get them to the left and right of the carousel itself.

in my Angular.json file I have:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]