Question

我正在使用ngx-slick-slider（https://www.npmjs.com/package/ngx-slick-carousel），并且当项目较少时，似乎没有禁用滑块的配置。当项目少于显示轮播所需的项目时，它们将显示在屏幕中央。我该如何实现？

模板：

<div class="scrolling-wrapper" *ngIf="hasUsage">
    <ngx-slick-carousel class="carousel"
                        #slickModal="slick-carousel"
                        [config]="slideConfig"
                        (init)="slickInit($event)"
                        (breakpoint)="breakpoint($event)"
                        (afterChange)="afterChange($event)"
                        (beforeChange)="beforeChange($event)">
        <div ngxSlickItem *ngFor="let card of data" class="slide">
            <div class="card-container">
                <card-component
                        [thecard]="card"
                ></card-component>
            </div>
        </div>
    </ngx-slick-carousel>
</div>

component.ts：

slideConfig = {
        "slidesToShow": 7,
        "slidesToScroll": 4,
        "infinite": false
    };

    slickInit(e:any) {
        console.log('slick initialized');
    }

    breakpoint(e:any) {
        console.log('breakpoint');
    }

    afterChange(e:any) {
        console.log('afterChange');
    }

    beforeChange(e:any) {
        console.log('beforeChange');
    }

Answer 1

I see two ways to go about this:

Disable the buttons in the slick config { 'arrows': false } and then create custom elements in your template that hook up to slickNext() and slickPrev(). You can now disable those buttons using something like *ngIf="slides.length <= mySlideLimit
You could also create custom templates for your forward/previous buttons in the config using the nextArrow and prevArrow config options.

I persionallly prefer option 1.

template:

<div class="scrolling-wrapper" *ngIf="hasUsage">
    <ngx-slick-carousel class="carousel" ...>
    </ngx-slick-carousel>
    <button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
    <button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>

Component.ts

slideConfig = {
        "slidesToShow": 7,
        "slidesToScroll": 4,
        "infinite": false,
        "arrows": false,
    };

...

You can find more info on all that suff here: http://kenwheeler.github.io/slick/

少数项目时如何禁用ngx滑动滑块

1 个答案: