How can I change the Ionic 2 slider so that it has several lines (grid type 4x4, 16 per page)?

Question

I use the Ionic2 slider from its components: http://ionicframework.com/docs/v2/api/components/slides/Slides/ . I can’t figure out how to make slider elements on multiple lines, 4x4 = 16 elements per slide.

This is the code I have. The generated html code on the actual page looks different.

            <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 installing a Components ionic grid in each slide . Here's the API docs for the grid