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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions