joselcvarela / ng2-carouselamos

Simple carousel/slider for angular 2.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug when creating buttons inside the carousel and clicking on them

pantonis opened this issue · comments

 <div ng2-carouselamos [width]="1300" [items]="productTypes" [$item]="itemTemplate" [$prev]="prevTemplate" [$next]="nextTemplate"></div>

                <ng-template #prevTemplate>
                    <span class="">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                </ng-template>

                <ng-template #nextTemplate>
                    <span class="">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </span>
                </ng-template>

                <ng-template let-item let-i="index" #itemTemplate>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn margin-right-5" [ngClass]="(item.Selected === true) ? 'btn-selected' : 'btn-not-selected'" (click)="productTypesClicked(item)">                        
                            <input type="checkbox" class="toggle" [value]="item.Name">{{item.Name}}
                        </label>
                    </div>
                </ng-template>

in TS

export class CarouselItem {
    Name: string;
    Selected: boolean;

    constructor(name: string, selected: boolean) {
        this.Name = name;
        this.Selected = selected;
    }
}

    public assetTypeClicked(item: CarouselItem): void {
        item.Selected = !item.Selected;
        alert(item.Name);
    }

Try to click the first 2-3 items on the left then press the next button then try to click on buttons next to next button. Instead of the assetTypeClicked event to be fired the carousel scrolls left

+1, did you find a way to fix this?

no. dont have the time to check it :(

This can be fixed by commenting the this.snap inside mouseUp function.