CODEWITHSUNDEEP
angularionic2
inoxe
inoxe

Reputation: 89

Ionic 2 : How to make ionic 2 slider dynamic

How to create a slider to a set of images coming from my json . or is there any way to make corosal in ionic 2 something similar to = (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h)
Thank you. 

 <ion-slides>
      <ion-slide *ngFor="#test of tests"  >
          <img src = "test.img">
      </ion-slide>
    </ion-slides>

Upvotes: 3

Views: 3367

Answers (2)

ionx
ionx

Reputation: 116

Ya that cane be done

HTML file

   <ion-slides>
      <ion-slide *ngFor = ' let galleryimg of projectimages ' >
          <img src="url" >
      </ion-slide>
    </ion-slides>

typescript file

in constructor make use so a service to get the data from server then assign the value to the projectimages variable .

Upvotes: 4

mayur
mayur

Reputation: 3618

Template

<ion-slides [options]="data?.IonSlideOptions">
      <ion-slide *ngFor="let slide of data?.Slides">
          <img [src]="slide.image">
      </ion-slide>
</ion-slides>

Component

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

@Component({
  templateUrl: 'my-page.html'
})
class MyPage {
  data = {
      "IonSlideOptions":{
         "pager":true,
         "direction":"vertical" /*Swipe direction: 'horizontal'or vertical'.*/
      },
      "Slides":[
         {
            "image":"http://www.realkidshades.com/wp-content/uploads/2015/10/bigstock-Kids-Posing-Over-White-72232852.jpg"
         },
         {
            "image":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/527c3940185015.57751b209b12e.gif"
         }
      ]
};
}

Upvotes: 1

Related Questions