Ionic 2 Slides: Slides are an important component that provides functionality to slide the content to left or right. Slides can be used to create galleries, page-based layouts, one page layouts etc. ion-slides component is used to create slides in Ionic 2. There are various configurations available that can be used easily.
Here in this tutorial we are going to explain how to create slides in Ionic 2 framework. You can use our online editor to run the demo online.
Ionic 2 Slides Example
ion-slides component is multi section container, each section can be swiped or dragged between. Let us first create the very basic slides in Ionic 2.
Ionic 2 Slides Example:
<ion-slides pager>
<ion-slide style="background-color: yellow">
<h2>My Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: pink">
<h2>My Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: green">
<h2>My Slide 3</h2>
</ion-slide>
</ion-slides>
|
If you run the above example it will produce the output something like this –