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


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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^