Как отключить скользящий слайдер ngx, когда мало предметов? - PullRequest
Новая
       9

Как отключить скользящий слайдер ngx, когда мало предметов?

0 голосов
/ 18 января 2019

Я работаю с 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');
    }

1 Ответ

0 голосов
/ 18 января 2019

Я вижу два способа сделать это:

  1. Отключить кнопки в гладком конфиге { 'arrows': false } и затем создайте пользовательские элементы в вашем шаблоне, которые подключаются до slickNext() и slickPrev(). Теперь вы можете отключить эти кнопки, используя что-то вроде *ngIf="slides.length <= mySlideLimit

  2. Вы также можете создавать собственные шаблоны для ваших кнопок вперед / назад в конфигурации, используя опции конфигурации nextArrow и prevArrow.

Я лично предпочитаю вариант 1.

шаблон: 

<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,
    };

...

Вы можете найти больше информации обо всем, что достаточно здесь: http://kenwheeler.github.io/slick/

...