The ionic slides component is the multi-section container. You can swipe or drag any segment between them. This contains any number of slides components. Slides help it easy to make galleries, tutorials, and page-based layouts. It takes several configuration options on the <ion-slides> component.

Ion-Slide

The ion-slide component is the child component of slides. The template should be required written as the ionic slide. Any slide content must be written in this <ion-slide> component and should be used in conjunction with the slides.

This example helps you to understand how you can use the slides in the ionic application.

Example:

Home.page.html

home.page.scss

Output: After executing this code, you will get the output, as shown below.

Ionic Slides 1

If you slide the page, it will display the next page, which is shown below. You can also try it for sliding all the pages.

Ionic Slides 2

. Custom Animations

By default, Ionic slides use the built-in animation effect of the slide. It helps to provide the custom animations via the options property. You can use the following syntax to create the custom animation with the help of option property.

This example explains how you can use the custom animation effects with the ionic slides in the ionic application.

Example:

Home.page.html

Home.page.ts

Output: After executing this code, it will show the slider when you start the ionic application. You can see any slide from this page. The output as shown below:

Ionic Slides

Pin It on Pinterest

Share This