Swiper Loop: true 不能正常工作。角

Question

我有 12 个循环元素，其中 5 个可见。当第 12 个元素处于活动状态并且用户滑动到第 13 个元素（swiper 创建重复）时，Angular 不会将其识别为活动的。当您尝试从 1 个元素向后滑动时也会发生同样的情况。

<swiper [config]="swiperConfig" [loop]="true" [centeredSlides]="true" class="container" [watchSlidesVisibility]="true" [navigation]="true" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()">

        <ng-template swiperSlide let-data *ngFor="let sign of horoscope.signs">
            <div *ngIf="data.isActive" id="active-class" class="sign active-class">
                <h3 class="sign-name">{{sign.signInfo.name}}</h3>
                <img app-lazy-load class="sign-image" [src]="'assets/horoscope/'+sign.signInfo.sign+'.png'" alt="Astrološki znak: {{sign.signInfo.name}}" />
                <p class="sign-text">{{sign.text.substring(0, 100)}}...<a routerLink="/horoskop/{{sign.signInfo.slug}}">prikaži več</a></p>
            </div>
            <div *ngIf="!data.isActive" class="sign not-active">
                <img class="sign-image" [src]="'assets/horoscope/'+sign.signInfo.sign+'.png'" alt="Astrološki znak: {{sign.signInfo.name}}" />
            </div>
        </ng-template>
    </swiper>

swiperConfig: any = {
    slidesPerView: '1',
    slideToClickedSlide: true,
    lazy: false,
    direction:'horizontal',
    slideShadows: true,
    breakpoints: {
            736: {
                    slidesPerView: '3'
            },
            1200: {
                slidesPerView: '5'
        }
    }

}