The Slides component is a multi-section container
and each one section can be dragged or swiped between and it also contains any
number of Slides as per your applications requirements.
You can use a template to create slides and slide
events in the slides container i.e.
/// Basic slides - Angular 4 and
Ionic 3
<ion-slides
pager>
<ion-slide
style="background-color:
green">
<h2>Slide
1</h2>
</ion-slide>
<ion-slide
style="background-color:
aquamarine;">
<h2>Slide
2</h2>
</ion-slide>
<ion-slide
style="background-color:blueviolet;">
<h2>Slide
3</h2>
</ion-slide>
</ion-slides>
Example
steps –
//Slides.Component.ts
import
{ Component } from
'@angular/core';
import
{ NavController } from
'ionic-angular';
@Component({
templateUrl: 'template.html'
})
export
class BasicPage
{
slides = [
{
title: "What
Is Slides?",
description: "The
Slides component is a multi-section container. Each section can be swiped or
dragged between. It contains any number of Slide components.",
image: "/img/icn-slide-img-1.png"
},
{
title: "How
To Creating Slides?",
description: "You
should use a template to create slides and listen to slide events.",
image: "/img/icn-slide-img-2.png"
},
{
title: "How
To Navigating Slides?",
description: "After
creating and configuring the slides, you can navigate between them by swiping
or calling methods on the Slides instance.",
image: "/img/icn-slide-img-3.png"
}
];
}
//Slides.html
<ion-header>
<ion-navbar>
<ion-title>My
Slides</ion-title>
</ion-navbar>
</ion-header>
<ion-content
class="slides-page">
<ion-slides
pager>
<ion-slide
*ngFor="let
sld of slides; let i = index">
<ion-toolbar>
<ion-buttons
end>
<button
ion-button color="primary">Skip</button>
</ion-buttons>
</ion-toolbar>
<img
[src]="sld.image"
class="slide-image"/>
<h2 class="slide-title"
[innerHTML]="sld.title"></h2>
<p [innerHTML]="sld.description"></p>
</ion-slide>
<ion-slide>
<ion-toolbar></ion-toolbar>
<img
src="/img/icn-slide-img-4.png"
class="slide-image"/>
<h2 class="slide-title">Ready
to Play?</h2>
<button
ion-button large
clear icon-end
color="primary">Continue
<ion-icon
name="arrow-forward"></ion-icon></button>
</ion-slide>
</ion-slides>
</ion-content>
//Slides.scss
.slides-page
{
.toolbar-background
{
background:
#fff;
border-color:
transparent;
}
.slide-zoom {
height: 100%;
}
.slide-title {
margin-top:
2.8rem;
}
.slide-image {
max-height:
50%;
max-width:
60%;
margin:
18px 0;
}
}
Result looks like –
Stayed Informed –
Angular
Tutorials and Interviews
I hope you are enjoying with this post!
Please share with you friends. Thank you so much!