python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Bar Charts using Ionic 3 Angular 4

What Is Slides in Angular 4 and Ionic 3? How does Work?

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 style="background-color: aquamarine;">
      <h2>Slide 2</h2>
    <ion-slide style="background-color:blueviolet;">
      <h2>Slide 3</h2>

Example steps –

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

  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"


    <ion-title>My Slides</ion-title>

<ion-content class="slides-page">
<ion-slides pager>
  <ion-slide *ngFor="let sld of slides;  let i = index">
      <ion-buttons end>
        <button ion-button color="primary">Skip</button>

    <img [src]="sld.image" class="slide-image"/>
    <h2 class="slide-title" [innerHTML]="sld.title"></h2>
    <p [innerHTML]="sld.description"></p>

    <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>

.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 –

I hope you are enjoying with this post! Please share with you friends. Thank you so much!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions