ion2-image-slide

KO | EN

gitlite — search

#python #hacktoberfest #react #android #deep-learning #macos #nodejs #windows #awesome #awesome-list #security #pytorch #ios #openai

ion2-image-slide

(★ 8)

ionic image slide zoom

ion2-image-slide 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ionic Slide Zoom

[![](https://img.shields.io/badge/ionic-3.6.0-blue.svg?ionic=3.6.0)](https://github.com/jun1362008/ion2-image-slide)
[![](https://img.shields.io/npm/v/@cycle/core.svg)](https://www.npmjs.com/package/ion2-image-slide)

Ionic slide with zoom modal

![](https://raw.githubusercontent.com/jun1362008/ion2-image-slide/master/image-slide.gif)

### How To Use:

```bash
$ npm install ion2-image-slide --save
```

Then cd into `app.ts`:

```bash
import { SlideModule, SlideCmp } from 'ion2-image-slide';
```

```
@NgModule({
  imports: [
    xxx,
    SlideModule
  ],
  entrycomponents: [
    xxx,
    SlideCmp
  ]
})
```

Cd into your page:
```
  @ViewChild(Slides) slides: Slides;

imgSlides: Array<any> = [
    {
      url: 'xxx.jpg'
    },
    {
      url: 'xxx.jpg'
    },
    {
      url: 'xxx.jpg'
    },
    {
      url: 'xxx.jpg'
    }
  ];

constructor(private slideCtrl: SlideController){}

slideUp(ev: any) {
    let currentIndex = this.slides._activeIndex;
    let slide = this.slideCtrl.create({
      ev: ev,
      list: this.imgSlides,
      index: currentIndex,
      change: this.changeCB.bind(this)
    });
    slide.present({
      ev: {
        data: ev,
        list: this.imgSlides,
        index: currentIndex,
        change: this.changeCB.bind(this)
      }
    });
  }

changeCB(data: any) {
    this.slides.slideTo(data, 0);
  }
```

And the html template:
```
<div>
  <ion-slides>
    <ion-slide *ngFor="let slide of imgSlides">
      <img [src]="slide.url" (click)="slideUp($event)">
    </ion-slide>
  </ion-slides>
</div>
```

Substitute ios for android if not on a Mac.

ion2-image-slide

ion2-image-slide 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ion2-image-slide

ion2-image-slide 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README