<br />
<div class="wrapper" #tab>
    <div *ngFor="let item of imageData ;let i=index" style="width: 100%; height: 100%;  position: relative;  display: flex; overflow: hidden;">
        <ng-container>
            <div [@changeState]="(item.active) ? 'block'+type+'-'+navigationType:'none'+type+'-'+navigationType" [ngStyle]="{display: (item.active) ? 'block':'none'}"
                class="ce-caroueslimages">
                <img src="{{item.imagepath}}" alt="" style='height: 100%; width: 100%; object-fit: cover' />
            </div>

            <ng-container *ngIf="itemTemplate">
                <div style=" position: absolute;" [style.left]="positionLeft+'%'" [style.right]="positionRight+'%'">
                    <ng-template tabindex="1" [amexioTemplateWrapper]="itemTemplate" [item]="item"></ng-template>
                </div>
            </ng-container>

        </ng-container>

        <div class="ce-caroueslbar" [ngStyle]="{'opacity': translucent ? '0.7' : 'inherit'}" [style.background]="barBGColor">
            <div class="ce-caroueslnav">
                <a class="ce-caroueslnav-prev">
                    <span>Previous</span>
                    <div (click)="previousClick()" (mouseenter)="onPreBtnHover(i)">
                        <img src="{{preImagePath}}" alt="" style='height: 100%; width: 100%; object-fit: cover; cursor:pointer' />

                    </div>
                </a>
                <a class="ce-caroueslnav-next">
                    <span>Next</span>
                    <div (click)="nextClick()" (mouseenter)="onNextBtnHover(i)">

                        <img src="{{nextImagePath}}" alt="" style='height: 100%; width: 100%; object-fit: cover; cursor:pointer' />

                    </div>
                </a>
            </div>

            <div class="ce-caroueslnav-content">
                <div class="ce-caroueslnav-content-prev">
                    <span [style.color]="barFontColor"> {{titleModel.previousTitle}}</span>
                </div>
                <div class="ce-caroueslnav-content-current">
                    <span [style.color]="barFontColor">
                        {{titleModel.centerTitle}}
                    </span>
                </div>
                <div class="ce-caroueslnav-content-next">
                    <span [style.color]="barFontColor"> {{titleModel.nextTitle}}</span>
                </div>
            </div>
        </div>
    </div>
</div>