css – 如何修改Ionic 2滑块以使其有多行(网格类型4×4,16页)？

2019年7月28日 189次阅读

我正在使用Ionic2滑块,其组件：
http://ionicframework.com/docs/v2/api/components/slides/Slides/.

我无法弄清楚如何使滑块在多行上显示项目,每张幻灯片4×4 = 16项.

这是我的代码.实际页面中生成的html代码看起来不同.

            <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>

最佳答案 尝试在每张幻灯片中嵌套离子网格
Components.

这是
API docs for the grid

点赞