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 🙂

it’s out of date, wont able to getting work with latest ionic, which all the version after version 2.0.0 ionic, won’t work, will rewrite a tutorial for latest version of ionic 3

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  
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


declarations: [
imports: [
KSSwiperModule    //<----- only add code KSSwiperModule in here
bootstrap: [IonicApp],
entryComponents: [
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="{{s}}.jpg">

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.




    1. it’s out of date, it wont able to getting work with latest version of ionic. i will rewrite a tutorial about ionic 3 + swiper api soon, i will keep you in notify

Leave a Reply

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