How can I modify the Ionic 2 slider so that it has multiple rows (grid type 4x4, 16 per page)?

Question

I'm using the Ionic2 slider, from its components: http://ionicframework.com/docs/v2/api/components/slides/Slides/. I can't figure out how to make the slider show items on multiple rows, 4x4 = 16 items per slide.

This is the code I have. The generated html code in the actual page looks diferent.

            <ion-slides pager slidesPerView="16" spaceBetween="20">
                <ion-slide style="background-color: green">
                     <h2>Slide 1</h2>
                </ion-slide>
                <ion-slide style="background-color: blue">
                    <h2>Slide 2</h2>
                </ion-slide>
                <ion-slide style="background-color: red">
                    <h2>Slide 3</h2>
                </ion-slide>
                <ion-slide style="background-color: green">
                     <h2>Slide 1</h2>
                </ion-slide>
                <ion-slide style="background-color: blue">
                    <h2>Slide 2</h2>
                </ion-slide>
                <ion-slide style="background-color: red">
                    <h2>Slide 3</h2>
                </ion-slide>
            </ion-slides>

Answer 1

Try nesting an ion-grid Components in each slide. Here's the API docs for the grid