Trigger an event when owl-carousel reaches a specific currentSlideIndex

Question

I am using owl-carousel in my Angular 4 application as shown below:

<owl-carousel #owlElement [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item">
        <div class="coupons-div" style="cursor:pointer;">
            <img src="..//..//assets/images/slider/slider1.gif" />
        </div>
    </div>
    <div class="item">
        <div class="coupons-div" style="cursor:pointer;">
            <img src="..//..//assets/images/slider/slider2.gif" />
        </div>
    </div>
    <div class="item">
        <div class="coupons-div" style="cursor:pointer;">
            <img src="..//..//assets/images/slider/slider3.gif" />ng
        </div>

        <div class="carousel-caption d-none d-md-block">
            <!-- layer 1 -->

            <!-- layer 2 -->
            <div class="layer-1-2 wow slideInUp" data-wow-duration="2s" data-wow-delay=".1s">
                <h1>
                    <ul>
                        <li *ngFor="let item of firstoptions">{{item}}</li>
                    </ul>
                </h1>
            </div>

            <!-- layer 3 -->
            <div class="layer-1-3 hidden-xs wow slideInUp" data-wow-duration="2s" data-wow-delay=".2s">
                <a class="ready-btn right-btn page-scroll" routerLink="/" routerLinkActive="active" href="services">Nos
                    Services</a>
                <a class="ready-btn page-scroll" href="produits">Nos produits</a>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="coupons-div" style="cursor:pointer;">
            <img src="..//..//assets/images/slider/slider4.gif" />
        </div>
        <div class="carousel-caption d-none d-md-block">
            <!-- layer 1 -->
            <div class="layer-1-1 hidden-xs wow slideInDown">
                <h2 class="title1"></h2>
            </div>

            <!-- layer 2 -->
            <div class="layer-1-2 wow slideInUp">
                <h1>
                    <div [@listAnimation]="items.length" (@listAnimation.start)="logAnimation($event)"
                        (@listAnimation.done)="logAnimation($event)">
                        <span *ngFor="let item of items">
                            {{item}}
                        </span>
                    </div>
                </h1>
            </div>

            <!-- layer 3 -->
        </div>
    </div>
</owl-carousel>

My component.ts

mySlideOptions = { items: 1, dots: false, nav: false, loop: true, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, animateOut: 'slideOutDown', animateIn: 'flipInX' };
images = ['..//..//assets/images/slider/slider1.gif', '..//..//assets/images/slider/slider2.gif', '..//..//assets/images/slider/slider3.gif', '..//..//assets/images/slider/slider4.gif']
@ViewChild('owlElement') owlElement: OwlCarousel;

ngOnInit() {
    console.log(this.owlElement);
    console.log("index is");
    console.log(this.owlElement.$owlChild.currentSlideIndex);
}

I want to trigger an event when the fourth slide is shown. How can I do that?

Note : I tried to use the currentSlideIndex but it didn't work. An error message appears telling that the currentSlideIndex is undefined.

OwlCarousel {differs: IterableDiffers, carouselClasses: "", options: {…}, $owlChild: OwlChild}$owlChild: OwlChild {el: ElementRef, owlClass: true, options: {…}, $owl: jQuery.fn.init(1), currentSlideIndex: 3}carouselClasses: (2) ["owl-theme", "sliding"]differ: DefaultIterableDiffer {_length: 4, _collection: Array(4), _linkedRecords: _DuplicateMap, _unlinkedRecords: null, previousItHead: IterableChangeRecord, …}differs: IterableDiffers {factories: Array(1)}options: {items: 1, dots: false, nav: false, loop: true, autoplay: true, …}_items: (4) ["..//..//assets/images/slider/slider1.gif", "..//..//assets/images/slider/slider2.gif", "..//..//assets/images/slider/slider3.gif", "..//..//assets/images/slider/slider4.gif"]proto: Object home.component.ts:121 index is home.component.ts:123 undefined

Answer 1

Try this

currentSlideIndex:any;
ngAfterViewInit() {
    this.owlElement.$owlChild.$owl.on("changed.owl.carousel", (event: any) => {
        this.currentSlideIndex = event.item.index;
        console.log(this.currentSlideIndex);
    });
}