Избегать повторяющихся предметов в кафеле Нгу? - PullRequest
Новая
       10

Избегать повторяющихся предметов в кафеле Нгу?

2 голосов
/ 23 января 2020

Я использую библиотеку @ ngu / carousel для создания динамических c каруселей в моем приложении Angular, проблема в том, что каждый элемент внутри контейнера карусели дублируется, это вызывает первый элемент, который отображается дважды, когда у меня недостаточно элементов для заполнения одного слайда.

Это моя структура карусели: 

carouselConfig: NguCarouselConfig = {
    grid: { xs: 1, sm: 1, md: 3, lg: 3, all: 0 },
    loop: false,
    slide: 3,
    touch: false,
    point: {
      visible: true,
      hideOnSingleSlide: true
    },
    velocity: 0.2
  };

Я строю карусель внутри вкладки, так что на каждой вкладке есть карусель с разным количеством предметов, на каждом слайде есть 3 предмета, все отлично работает, когда в карусели 3+ предмета, но в случае, если у меня только 2, вместо того, чтобы показывать только эти 2, первый предмет также отображается на 3-й позиции:

Текущий результат

На изображении выше элементы с зеленой рамкой - это один и тот же элемент, в этой карусели я только всего 2 элемента, но вместо этого в разметке отображается 4.

Результирующая разметка

Есть ли способ избежать дублирования элементов, чтобы, когда у меня было только 2 элемента, это показывает только те 2 и пробел, где будет находиться третий?

Ожидаемый результат

Это мой HTML код для построения карусели внутри каждой вкладки: 

<ngu-carousel #myCarousel [inputs]="carouselConfig"
       [dataSource]="filterTabs(title)">
     <div *nguCarouselDef="let item; let i = index" class="item">
     <div class="wsm_product-item" (click)="selectProduct(item._id)" [ngClass]="activeProduct(item._id) ? 'carousel-active' : ''">
         <header class="wsm_product-header">
            <span>Available For</span>
            <img src="/assets/img/icon-google.png" *ngIf="item.type === 'adwords'" width="15" title="{{ item.type }}" alt="Google Ads">
            <img src="/assets/img/svg/icon-mads.svg" *ngIf="item.type === 'bing'" width="15" title="{{ item.type }}" alt="Bing Ads">
            <img src="/assets/img/icon-google.png" *ngIf="item.type === 'all'" width="15" title="{{ item.type }}" alt="Google Ads">
            <img src="/assets/img/svg/icon-mads.svg" *ngIf="item.type === 'all'" width="15" title="{{ item.type }}" alt="Bing Ads">
         </header>
         <h3 class="wsm_product-title" title="{{item.name}}">{{item.name}}</h3>
         <p class="wsm_product-description">{{item.description}}</p>
     </div>
   </div>

   <button NguCarouselPrev class="mdi mdi-chevron-left wsm_prod-nav-previous" [ngClass]="myCarousel.isFirst ? 'carousel-disable' : ''"></button>
   <button NguCarouselNext class="mdi mdi-chevron-right wsm_prod-nav-next"    [ngClass]="myCarousel.isLast ? 'carousel-disable' : ''"></button>

   <ul class="myPoint" NguCarouselPoint>
       <li *ngFor="let i of myCarousel?.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"></li>
   </ul>
</ngu-carousel>

И функция фильтрации элементов на основе свойства: 

filterTabs(title: string) {
   return this.carouselItems.filter(cp => cp.objectives.includes(title));
}

1 Ответ

1 голос
/ 23 января 2020

Попробуйте установить длину ползунка равной длине элемента, если она меньше 3. Если элементов больше 3, установите значение 3. Как показано ниже 

var slideLength = items.length > 3 : 3 ? items.length
slide: slideLength
...