I am bigginner in angular 4. In fact I am using owl-carousel in my angular 4 application as showen below:
<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>
in component.ts
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 showen. 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 thank you..