Ionic Slides
The Slides components contain pages that can be changed by swiping or dragging the content screen. It is a multi-section container. It can include any number of Slide components. It is very useful in creating galleries, tutorials, and page-based layouts.
Ion-slide: It is a child component of Ionic slides. You can write the templates as <ion-slide>. The slide content should be written inside this component which should be used in conjunction with Slides.
The following example explains how you can use slides components with the Ionic app.
Example
Home.page.html
In this example, we have created four slider pages. These slider pages are placed inside the sub child <ion-slide> of <ion-slides> components.
Home.page.scss
This page contains the styling of elements which you have used in the app.
Output:
When you execute the above code snippets, it will give the following output.
Next, if you slide or drag the page, it will give the next page as like below image. You can do it for all of your sliding pages.
Custom Animation
By default, Ionic Slides components use the built-in slide animation effects. But, you can also use the custom animations for your Slides components. It can be done by using the options property, which looks like below syntax.
You can find the different slider parameter options from here.
The following example explains how custom animation effects can be used with the Slides components.
Home.page.html
Home.page.ts
Output:
When you execute the Ionic app, it will give the initial sliding page that you have set in the slider options. Now, you can slide other pages from this page.
