Carousel gets distorted and it is not working with the bs-stepper tab switching

[js-pankaj-rana]

I have two stepper and every stepper has a CarouselComponent, when I move one step two second step, the UI get broken.

package details

"ngx-owl-carousel-o": "^16.0.0",
"bs-stepper": "^1.7.0",

Step 1 Image

Step 2 image

export class StepperOneComponent implements OnInit, OnDestroy {
@ViewChild('owlCarOne') owlCarouselOne: CarouselComponent;

public customOptions: OwlOptions = {
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
   ...
  }
}

export class StepperTwoComponent implements OnInit, OnDestroy {
@ViewChild('owlCarTwo') owlCarouselTwo: CarouselComponent;
public customOptions: OwlOptions = {
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
   ...
  }
}

html template of stepper (parent of carousel components)

<div id="stepper1" class="bs-stepper pt-4" #stepperRef>
      <div class="bs-stepper-header">
        <div class="step" data-target="#test-l-1">
          <button class="step-trigger">
            <span class="bs-stepper-circle">1</span>
            <span class="bs-stepper-label">Personal Information</span>
          </button>
        </div>
        <div class="line"></div>
        <div class="step" data-target="#test-l-2">
          <button class="step-trigger" [disabled]="disableStepper2">
            <span class="bs-stepper-circle">2</span>
            <span class="bs-stepper-label">Eligibility</span>
          </button>
        </div>
       </div>
      <div class="bs-stepper-content">
        <div id="test-l-1" class="content">
            <app-stepper-one></app-stepper-one>
         </div>
         <div id="test-l-2" class="content">
           <app-stepper-two></app-stepper-one>
         </div>
         </div>

StpperOne HTML template

<owl-carousel-o [options]="customOptions" #owlCarOne>
    <ng-template carouselSlide>
            <div class="card">
                some content
            </div>
            <div>        
                <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
                <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
            </div>
    </ng-template>
    <ng-template carouselSlide>
        <div class="card">
            some content
        </div>

        <div>
            <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
            <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
        </div>
    </ng-template>

Stepper One HTML template

<owl-carousel-o [options]="customOptions" #owlCarOne>
    <ng-template carouselSlide>
            <div class="card">
                some content
            </div>
            <div>        
                <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
                <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
            </div>
    </ng-template>
    <ng-template carouselSlide>
        <div class="card">
            some content
        </div>
        <div>
            <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
            <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
        </div>
    </ng-template>

Stepper Two HTML template

<owl-carousel-o [options]="customOptions" #owlCarTwo>
    <ng-template carouselSlide>
            <div class="card">
                some content
            </div>
            <div>        
                <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
                <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
            </div>
    </ng-template>
    <ng-template carouselSlide>
        <div class="card">
            some content
        </div>

        <div>
            <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button>
            <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button>
        </div>
    </ng-template>
</owl-carousel-o>