How to modify position of prev & next buttons of owl-carousel-o 14.0.1 version-CodePudding

I've spend some hours trying to modify the position of my carousel's buttons prev and next.

They are currently at the bottom of my carousel and are very small (and really not very visible).

I tried all page on stack I've seen but most of them use jquery (I won't use it, I'm on Angular 14 and I don't think it's a good practice, if you think I'm wrong, tell me why)

my html :

<owl-carousel-o [options]="customOptions" *ngIf="items.length > 0">
    <ng-container *ngFor="let item of items">
        <ng-template carouselSlide>
            <h4  *ngIf="item.titre">{{ item.titre }}</h4>
            <h4 *ngIf="item.nom">{{ item.nom }}</h4>
            <img [src]="serverImg   item.images[item.indexImage]" [alt]="item.titre">
            <p *ngIf="item.titre">Proposé par : {{ item.proposeur }}</p>
            <p >{{ item.description }}</p>
        </ng-template>
    </ng-container>
</owl-carousel-o>

my ts:

customOptions: OwlOptions = {
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

I've seen the whole component and look like it's impossible to move them by any option so do you think I could use a class and if yes, how ?

I want the prev button at the top left and the next button at the top right.

CodePudding user response：

I finally found out how to do:


owl-carousel-o {
  position: relative;
}

::ng-deep .owl-prev, ::ng-deep .owl-next {
  position:absolute;
  top: 30%;
  background-color: black !important;
}

::ng-deep .owl-prev {
  left: 0;
}

::ng-deep .owl-next {
  right: 0;
}

And I modified my arrows :

navText: ['<i ></i>', '<i ></i>']