Ionic 2 + Swiper api ~ solve multiple slides issue

Try to solve this issue about 2 weeks, i post issue on ionic 2 forum and stackoverflow, there is no any help post to show how to add multiple slides in same page. Thanks f1r361rd he point out that i need to add swiper api to ionic 2, so i have other choice than ion-slides. For right now as i know, there still can’t have multiple ion-slides in same page on ionic 2. let me know if i am wrong 🙂

1. Add Swpier api to our project, open terminal


cd youproject

npm install angular2-swiper --save

 

2. add code to the page you want the multiple slides, For example, if you want the slide on home page, then go to home.ts file.  src/pages/home/home.ts

 


import {KSSwiperSlide, KSSwiperContainer} from '../../../node_modules/angular2-swiper/dist/ks-swiper';   
// add above code on top of home.ts file  
@Component({
selector: 'page-home',
templateUrl: 'home.html'
, providers: [KSSwiperSlide, KSSwiperContainer] //<---- only add code  "KSSwiperSlide, KSSwiperContainer" in component providers
})

3. Then we need to add modules to our project, go to  src/app/app.module.ts.

 


import {KSSwiperModule} from '../../node_modules/angular2-swiper/dist/ks-swiper.module';  
//<----- Add above code on top of your app.module.ts file

 

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp),
KSSwiperModule    //<----- only add code KSSwiperModule in here
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
],
providers: [AuthService, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})

4. Go to src/pages/home/home.html file, add following code as many as you want to test the multiple slides

<div class="myslides">
  <ks-swiper-container [options]="example1SwipeOptions">
    <ks-swiper-slide *ngFor="let s of [1,2,3,4,5,6,7]">
      <img src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
    </ks-swiper-slide>
  </ks-swiper-container>
</div>

i am noob on ionic 2, so let me know if i have something wrong on this tutorial ^_^, hope this will give you some help.

 

 

Leave a Reply

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