Can prev and next buttons be shown when width of the carousel with multiple Items is greater than viewport width?

[ashashree14]

I do not want to show the prev and next buttons like above when my carousel items are visible within viewport.
The buttons should be visible when like below.

Do we have any support from this library?

<ngu-carousel #myCarousel class="menu-tabs" [inputs]="carouselConfig" [dataSource]="dataTabsService.tabs">
  <div *nguCarouselDef="let tab;" class="item" (click)="initializeDataTab(tab)">
    <div class="tile">
      <button *ngIf="tab.closeIcon" class="pull-right close" type="button" (click)="dataTabsService.closeTab(tab.tabId)">
        ×
      </button>
      <a class="nav-link" [class.active]="dataTabsService.currentTabId == tab.tabId" id="{{ tab.tabId }}" data-toggle="tab"
        href="#{{ tab.tabId }}Content" role="tab">{{ tab.name }}</a>
    </div>
  </div>
  <button NguCarouselPrev class='leftRs' >&lt;</button>
  <button NguCarouselNext class='rightRs' >&gt;</button>
</ngu-carousel>

and in .ts file, config is

this.carouselConfig = {
      grid: { xs: 1, sm: 3, md: 4, lg: 7, all: 0 },
      slide: 1,
      speed: 600,
      point: {
        visible: false
      }
    };

[jennywlove]

Any updates on this? I'm running into this issue as well.

[diosney]

I stumbled upon this too, but still no updates.

If you need a quick fix, you can do something like this:

 // The hardcoded breakpoints the library uses.
  sliderBreakpoints = {
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1200
  };

Since the items per breakpoint is configured initially, as:

this.carouselConfig = {
   ...
   grid: { xs: 1, sm: 1, md: 2, lg: 3, all: 0 }
};

You can do something like:

  areLessOrSameVisibleItems(): boolean {
    const width      = window.innerWidth;
    let breakpointId = 'xs';

    if (width >= this.sliderBreakpoints.lg) {
      breakpointId = 'lg';
    }
    else if (width >= this.sliderBreakpoints.md) {
      breakpointId = 'md';
    }
    else if (width >= this.sliderBreakpoints.sm) {
      breakpointId = 'sm';
    }
    else {
      breakpointId = 'sm';
    }

    return (this.items.length <= this.carouselConfig.grid[breakpointId]);
  }

and in the template:

  <button NguCarouselNext class="right" [hidden]="areLessOrSameVisibleItems()">
    <mat-icon>chevron_right</mat-icon>
  </button>

  <button NguCarouselPrev class="left" [hidden]="areLessOrSameVisibleItems()">
    <mat-icon>chevron_left</mat-icon>

you can set it as a getter too.

[sheikalthaf]

@ashashree14 @diosney Sorry the late response, this can be easily achieved by if condition

<button 
    *ngIf="!(myCarousel.isFirst && myCarousel.isLast)"
    NguCarouselPrev
    class="leftRs"
    [style.opacity]="myCarousel.isFirst ? 0.5 : 1">
&lt;
 </button>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity for 6 months. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

Closing this issue due to no activity for 6 months.