search

vdanyliv / ngx-tiny-slider

Angular wrapper for tiny-slider
https://npmjs.com/package/ngx-tiny-slider
MIT License
15 stars 18 forks source link

Router links inside of slider items #14

Closed sGerli closed 4 years ago

sGerli commented 4 years ago

When using a routerLink inside of a slider item it doesn't get mapped to some of the dynamically generated ones in an infinite slider.

<ngx-tiny-slider class="slider" #ngxSlider [config]="tinySliderConfig">
        <ng-container class="items">
            <button class="no-styles" #slideList *ngFor="let card of cards" [routerLink]="card.route">
                <div [class]="'card-poster card-poster--' + cardType">
                    <div class="card-poster__title">
                        <h3>{{card.title}}</h3>
                    </div>
                    <div class="card-poster__background" [ngStyle]="{ 'background-image': 'url(' + card.img + ')'}">
                    </div>
                </div>
            </button>
        </ng-container>
    </ngx-tiny-slider>

I already fixed the ngFor issue with one of the responses of #13.

vdanyliv commented 4 years ago

@sGerli could yu provide some sandbox where I can play with this?

sGerli commented 4 years ago

Heres a small demo: https://stackblitz.com/edit/angular-tiny-slider In there you can see that the card at the left and other dynamically generated ones don't have a routerlink binded to them.

vdanyliv commented 4 years ago

@sGerli I changed render little bit, and everything works: 

<a [routerLink]="card.route">
<img [src]="card.img">
</a>