Javatpoint Logo
Javatpoint Logo

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.

Ionic Slides

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.

Ionic Slides

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.

Ionic Slides
Next TopicIonic Spinner




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA