CODEWITHSUNDEEP
angularowl-carousel
vince
vince

Reputation: 45

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

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 class="activite_nom" *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 class="description">{{ 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.

Upvotes: 0

Views: 1183

Answers (1)

vince
vince

Reputation: 45

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 class="fas fa-angle-left fa-2x"></i>', '<i class="fas fa-angle-right fa-2x"></i>']

Upvotes: 1

Related Questions