Avoid duplicate items in Ngu Carousel?

Question

I'm using the @ngu/carousel library to build dynamic carousels on my Angular app, the issue is that each item inside the carousel container is being duplicated, this causes the first item to show twice when I don't have enough items to fill one single slide.

This is my carousel structure:

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

I'm building the carousel inside a tabset, so each tab has a carousel with different amount of items, each slide has 3 items, everything works fine when I have 3+ items in the carousel, but in the case I have only 2, instead of only showing those 2, the first item shows at the 3rd position as well:

Current Result

In the image above, the items with the green border are the same item, in this carousel, I only have 2 items total, but the markup shows 4 instead.

Resulting Markup

Is there any way to avoid items being duplicated so that when I only have 2 items, it only shows those 2 and a blank space where the third one would be?

Expected Result

This is my HTML code to build the carousel inside each tab:

<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>

And the function to filter items based on a property:

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

Shiv Patne · Answer 1 · 2020-01-23T18:54:03.343

1

Try to set slider length to item length if it's less than 3. If items are more than 3 then set it to 3. As below

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

edited Jan 23 '20 at 18:54

answered Jan 23 '20 at 18:06

Shiv Patne

543
3
10

I'm not sure this is something I can do, since I have to create a carousel for each tab (using Angular Material tabs), I only get the amount of items inside the carousel after the carousel is configured; I'll add the template code on the question – Andreina Rugama Jan 23 '20 at 20:26
Please check this thread, couple of solutions mentioned in that. https://github.com/sheikalthaf/ngu-carousel/issues/142 – Shiv Patne Jan 23 '20 at 22:50

Avoid duplicate items in Ngu Carousel?

1 Answers1