Ionic 5 Development

How Ion-Slides work in Ionic 5

Posted by
We guide you step by step how to integrate ion-slides with ionic 5 mobile app

Indexing of development :

  • Setup and install the ionic framework
  • Create an ionic 5 application and platform setup
  • Integrate ion-slides with ionic app
  • Run and test the project

Required tools :

  • Node JS
  • Angular 8
  • Ionic 5
  • Cordova
  • Terminal or Command Line
  • IDE or Text Editor (We are using Visual Studio Code)

Let’s start the development

Before going move-forward and according to the principal steps, we believe that you have already to install NodeJS. If not, kindly download it using the link: NodeJS

Step 1: Setup and install the ionic framework

$ sudo npm install -g ionic
$ sudo ionic -v

You need to install the ionic framework, to full-fill the requirement to create an ionic project.

Ionic Installation
Install the ionic framework and check the version

Step:2 Integrate ion-slides with ionic app

Integrate ion-slides with ionic app

Step 3 : Create an ionic 5 application and platform setup

Now it times to set up the new ionic 5 application, please use the below command and run it to your terminal or command prompt.

$ ionic start ion_slides_ionic_5 blank --type=angular

  ? Integrate your new app with Capacitor to target native iOS and Android? No

If see the above question … Choose No. It will integrate the Capacitor instead of Cordova as Native accessibility

Now it’s time to move in to your app folder

$ cd ./ion_slides_ionic_5
ionic slides
ionic slides
ionic slides
ionic slides

Run your app using below ionic command

$ ionic serve -l

Setup 4 : Integrate ionic slides code in to your Home.html files

Your Home.page.html

<ion-header>
  <ion-toolbar class="home-toolbar">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Ionic Slides
    </ion-title>
    <ion-avatar (click)="openPopOver($event)" class="cls-avatar" slot="end">
      <img src="../../assets/icon/person.png">
    </ion-avatar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-slides #slides effect="coverflow" (ionSlideAfterInit)="ionSlideAfterInit()"
    (ionSlideDidChange)="slideChanged(slides)">
    <ion-slide *ngFor="let item of mainPredictionArray">
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>{{item.header}}</ion-card-subtitle>
          <ion-card-title>{{item.title}}</ion-card-title>
        </ion-card-header>
        <img class="card-img" src="{{item.predictionImageURL}}" />
        <ion-card-content>
          {{item.subject}}
        </ion-card-content>
        <ion-item>
          <ion-button color="light" slot="start">
            <ion-icon name="thumbs-up-outline"></ion-icon>
          </ion-button>
          <ion-button color="light" slot="end">
            <ion-icon name="bookmark-outline"></ion-icon>
          </ion-button>
          <ion-badge color="tertiary" slot="end">34k</ion-badge>
        </ion-item>
      </ion-card>
      <ion-item class="card-item">
        <ion-icon style="margin-right: 0px;" slot="start" class="bigger"
          src="../../../assets/svg/chatbubbles-sharp.svg"></ion-icon>
        <ion-textarea [(ngModel)]="conversationDetail" style="padding-left: 10px;">
        </ion-textarea>
        <ion-icon slot="end" (click)="saveConversation(item.id)" name="send-outline"></ion-icon>
        <ion-icon slot="end" (click)="pickImage(item.id)" slot="end" name="image-outline"></ion-icon>
      </ion-item>
      <div *ngFor="let chat of item.chatResponse">
        <ion-item>
          <ion-avatar slot="start">
            <img class="ion-img-internal" src="{{chat.userProfilePic}}">
          </ion-avatar>
          <ion-label>
            <h2 class="ion-img-h2 ">{{chat.userDisplayName}} </h2>
            <p>{{chat.conversation}}</p>
          </ion-label>
        </ion-item>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>
<ion-footer slot="end" class="ion-no-border">
</ion-footer>

Insert your png or jpeg files in to your assets of root folder.

home.page.scss

ion-card {
  border-radius: 5px;
  border-style: ridge;
}
.home-toolbar {
  padding: 1px !important;
}
.swiper-slide {
  overflow-y: scroll;
  display: block;
}
.cls-avatar {
  margin: 1px 4px 0px 0px !important;
  height: 45px;
  width: 45px;
}
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.card-img {
  margin: 3px 0 3px !important;
}
.img-small {
  width: 40px;
  height: 40px;
  margin: 7px 0 7px !important;
}
ion-icon {
  .big {
    width: 50px;
    height: 50px;
  }

  .bigger {
    width: 40px;
    height: 40px;
    margin-right: 0px !important;
  }

  .red {
    color: red;
  }
}
.card-item {
  border-color: #a9d6ce;
  left: 2%;
  width: 96% !important;
  border-radius: 7px;
  border-style: groove;
}
#container strong {
  font-size: 20px;
  line-height: 26px;
}
#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

ion-content ion-toolbar {
  --background: translucent;
}
ion-slides {
  height: 100%;
}

.swiper-slide {
  display: block;
}

.swiper-slide h2 {
  margin-top: 2.8rem;
}
.ion-img-h2 {
  margin-top: 10px !important;
}
.ion-img-internal {
  max-height: 80% !important;
  max-width: 80% !important;
  margin: 13px 0 13px !important;
  pointer-events: none !important;
}

.swiper-slide img {
  max-height: 50%;
  max-width: 80%;
  margin: 60px 0 40px;
  pointer-events: none;
}

b {
  font-weight: 500;
}

p {
  padding: 0 40px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ion-color-step-600, #60646b);
}

p b {
  color: var(--ion-text-color, #000000);
}

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  mainPredictionArray: { header: string; predictionImageURL: string; subject: string; title: string; id: string; chatResponse: any[]; }[];
  loginProfilePic: any;
  constructor() {
    this.showSlides()
    
  }
  showSlides() {
    this.mainPredictionArray = 
[
{ "header": "Keyur Lasan", "predictionImageURL": "https://firebasestorage.googleapis.com/v0/b/future-prediction-34f29.appspot.com/o/images%2FKeyur.jpg?alt=media&token=4a892fe1-984a-4537-b92c-a6e94ff8c711", "subject": " Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836. ", "title": " Founded in 1829", "id": "Keyur", "chatResponse": [] },

{ "header": "Milan Marvadi", "predictionImageURL": "https://firebasestorage.googleapis.com/v0/b/future-prediction-34f29.appspot.com/o/images%2FMilan.jpg?alt=media&token=79c3e61c-d5de-4dd1-b04f-bfbc1ad39ff2", "subject": " Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836. ", "title": " Founded in 1829", "id": "Milan", "chatResponse": [] },

    { "header": "Shailesh Kotho", "predictionImageURL": "https://firebasestorage.googleapis.com/v0/b/future-prediction-34f29.appspot.com/o/images%2FShailesh.jpg?alt=media&token=b7efc8e6-c205-449c-89e0-1a0c17487815", "subject": " Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836. ", "title": " Founded in 1829", "id": "Shailesh", "chatResponse": [] },

    { "header": "Yogesh Kumar", "predictionImageURL": "https://firebasestorage.googleapis.com/v0/b/future-prediction-34f29.appspot.com/o/images%2FYogesh.jpg?alt=media&token=59c11de3-a55f-4188-8b5c-3baa53a253e9", "subject": " Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836. ", "title": " Founded in 1829", "id": "Yogesh", "chatResponse": [] }
    ]
  }

}
$ ionic cordova add android
$ ionic cordova add ios
$ ionic cordova run android
$ ionic cordova run ios

You can download the project using Github link click_here

We did it!

Thanks,

Yogesh Patil

Leave a Reply

Your email address will not be published. Required fields are marked *