Ngx-bootstrap: feat(carousel): add support of multiple items in slide

[DominicSachs]

Are you planing to allow multiple items in one slide ?
Like this one: https://codepen.io/anon/pen/YGqKzR

[valorkin]

yeap!

[halben]

Any road map for this?

[anandchakru]

I was able to achieve this with multilist
What I did on top of ngx-carousel is the following:

multiList - An array of array

<carousel class="templates">
    <template ngFor let-indx="index" let-multiListItem [ngForOf]="multiList">
        <slide>
            <template ngFor let-indx2="index" let-item [ngForOf]="multiListItem">
                <div class="col-xs-12 col-sm-4 col-md-2">
                    item - {{indx2}}
                    <div>{{item}}</div>
                </div>
            </template>
        </slide>
    </template>
</carousel>

To make it responsive I was listening on win resize like the following to rearrange:

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.rearrangeThumbs(event.target.innerWidth);
}

rearrangeThumbs method would dynamically decide the number of items per page based on win width and also rearrange the items inside multiList. Also ensure you debounce the window:resize events a little

/** Returns a function, that, as long as it continues to be invoked, will not be triggered.
  The function will be called after it stops being called for N milliseconds.*/
  private debounce(func: () => void, wait = 50) {
    let h: any;
    return () => {
      clearTimeout(h);
      h = setTimeout(() => func(), wait);
    }
  }
  debouncedRearrangeThumbs: Function = this.debounce(() => {
    this.rearrangeThumbs();
  }, 250);
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.debouncedRearrangeThumbs();
  }

[pantonis]

Any news on this one?

[thovo]

@anandchakru thank for your answer, multiList is a type of data or something else? Can you please provide some details?

[anandchakru]

@thovo multilist a list of list _mentioned in the top of my post_. Eg: public multiList: any[] = []; and later in the code I push lists into multiList. If you are a java person this would translate into something like this ArrayList<ArrayList<Object>> multiList

[thovo]

@anandchakru I tried like you said by using a sample array like this one below:
[[1,2,3], [3,4,5]]
but it didn't work, can you show a plunker how you do it? Many thanks!

[anandchakru]

@thovo a quick 5-min-rough-one here
without css, onResize listener to rearrange number of items per page - but it would be a good starting point.