How to add new values to grid ngu-carousel or change values to existing?

[maxkarpovets]

How to add new values to grid ngu-carousel or change values to existing?

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

I want to apply different values for laptops with resolution 1280x800 and 1440x900 and for bigger screens.

[sheikalthaf]

@maxkarpovets currently it is not possible. In next version you can able to changes the size dynamically according to your needs

Thanks

[maxkarpovets]

When the next version will be available?

[lynx-r]

+1

[arielin82]

+1 Hello there, This is not possible to do yet, right?

[SerhiiTsybulskyi]

+1

[arielin82]

I manage to "refresh" it with this workaround. using an ngFor that resets the dom element, every time the queryPlans list (its an @Input) changes, I update the reset array. and this makes the ngFor run again. <ngu-carousel #mpPlanCarousel *ngFor="let r of reset" [inputs]="carouselConfig" [dataSource]="sortedPlanCategories">

  ngOnChanges(changes: SimpleChanges): void {
    // Workaround to create a new Carousel, because ngu-carousel doesn't support to change the columns dynamically.
    if (changes.queryPlans && !changes.queryPlans.firstChange) {
      this.setCarouselConfig();
      this.reset[0] = {};
      this.initSortedPlanCategories();
    }
  }

  ngOnInit(): void  {

    this.reset[0] = {};  // change flag to force new carousel creation.

    this.setCarouselConfig();
  }

  setCarouselConfig(): void {
    // Sets carousel config with the right columns to be displayed according to the amount of plans
    // TODO: get the length of columns from the length of categories in the Ecosystem for Default Campaign
    // and other campaigns
    let columns = 3;  // Default length of columns from the length of categories
    if (this.clearanceSale) {
      columns = 2;
    } else if (this.queryPlans && this.queryPlans.length > 0) {
      columns = this.queryPlans.length;
    }
    this.carouselConfig = {
      grid: { xs: 1, sm: 1, md: columns, lg: columns, all: 0 },
      slide: 1,
      speed: 400,
      point: {
        visible: true
      },
      load: 2,
      loop: true,
      touch: true
    };
  }