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!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
