Инициировать событие, когда owl-carousel достигает определенного currentSlideIndex - PullRequest
Новая
       8

Инициировать событие, когда owl-carousel достигает определенного currentSlideIndex

0 голосов
/ 20 сентября 2019

Я использую owl-carousel в моем приложении Angular 4, как показано ниже: 

<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>

Мой 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);
}

Я хочу вызватьсобытие, когда показывается четвертый слайд.Как я могу это сделать?

Примечание: я пытался использовать currentSlideIndex, но он не работал.Появляется сообщение об ошибке, сообщающее, что currentSlideIndex - это undefined.

OwlCarousel {отличается: IterableDiffers, carouselClasses: "", параметры: {…}, $ owlChild: OwlChild} $ owlChild: OwlChild{el: ElementRef, owlClass: true, параметры: {…}, $ owl: jQuery.fn.init (1), currentSlideIndex: 3} carouselClasses: (2) ["owl-theme", "Sliding"] отличаются: DefaultIterableDiffer{_length: 4, _collection: Array (4), _linkedRecords: _DuplicateMap, _unlinkedRecords: null, previousItHead: IterableChangeRecord ,…} отличается: IterableDiffers {factories: Array (1)} параметры: {элементы: 1,точки: ложь, навигация: ложь, цикл: истина, автозапуск: правда,…} _items: (4) ["..//..//assets/images/slider/slider1.gif", "..//..//assets/images/slider/slider2.gif "," ..//..//assets/images/slider/slider3.gif "," ..//..//assets/images/slider/slider4.gif "] proto : Объект home.component.ts: 121 индекс is home.component.ts: 123 undefined

1 Ответ

0 голосов
/ 20 сентября 2019

Попробуйте это 

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