이온 2 : 이온 2 슬라이더를 동적으로 만드는 방법

Question

내 json에서 오는 일련의 이미지로 슬라이더를 만드는 방법. 또는 이오 틱 2와 유사한 것을 corosal 할 수있는 방법이 있습니까 = http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
감사합니다.

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

Answer 1

야

HTML 파일

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

타이프 스크립트 파일

(생성자에서) 서버에서 데이터를 가져 와서 projectimages 변수에 값을 할당하는 서비스를 사용합니다.

Answer 2

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" 
     } 
     ] 
}; 
}