https://github.com/jun1362008/ion2-image-slide

ionic image slide zoom
https://github.com/jun1362008/ion2-image-slide

image ionic ionic2 slide slides zoom

Last synced: 3 months ago
JSON representation

ionic image slide zoom

• Host: GitHub
• URL: https://github.com/jun1362008/ion2-image-slide
• Owner: jun1362008
• License: mit
• Created: 2017-08-24T07:24:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-24T09:38:23.000Z (over 7 years ago)
• Last Synced: 2024-08-08T17:30:47.742Z (6 months ago)
• Topics: image, ionic, ionic2, slide, slides, zoom
• Language: TypeScript
• Size: 6.44 MB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

![](./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 = [

    {

      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:

```



  

    

      

    

  



```


Substitute ios for android if not on a Mac.