Swiper in Ionic2 throws console error "params[param] is null"

Ionic Framework ionic-v3
1

Hi,
I tried importing swiper-3.2.7 to my ionic2 for customizing my slide box. But i am getting console error “params[param] is null”.

My JS file includes:

import {Page, NavController} from ‘ionic/ionic’;
import * as Swiper from ‘Swiper’;

@Page({
templateUrl: ‘app/home/home.html’
})

export class HomePage {
constructor(nav: NavController) {
this.nav = nav;
}

onPageLoaded(){
let swipesettings = {
loop: ‘true’,
pagination: ‘.swiper-pagination’,
nextButton: ‘.swiper-button-next’,
prevButton: ‘.swiper-button-prev’,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 100,
autoplayDisableOnInteraction: false
};
swiper = new Swiper(‘.swiper-container’, swipesettings);
}
}

I have included swiper in package.json and webpack.config files as well. Please help me to get it resolved. Thanks in advance.

2

We use Swiper 3.1.2 from http://www.idangero.us/swiper/ in Ionic 2. You can use this in your app without importing anything.

Ionic 2 Source Files:

https://github.com/driftyco/ionic2/blob/master/ionic/components/slides/swiper-widget.ts
https://github.com/driftyco/ionic2/blob/master/ionic/components/slides/slides.ts

Example Slides with images:

https://github.com/driftyco/ionic2/blob/master/ionic/components/slides/test/basic/main.html
https://github.com/driftyco/ionic2/blob/master/ionic/components/slides/test/basic/index.ts

The conference app is using this at the very beginning (all related code is in the tutorial directory):

https://github.com/driftyco/ionic-conference-app/tree/master/www/app/tutorial

So you can pass your options to the slider in options

<ion-slides pager [options]="extraOptions" (slideChanged)="onSlideChanged($event)">

JS:

    this.extraOptions = {
      loop: 'true',
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 100,
      autoplayDisableOnInteraction: false
    }
2 Likes
3

Thank you so much @brandyshea. It works perfect. :smiley:

1 Like
4

You’re welcome! Please note if you are using the (slideChanged) event this will be renamed to (change) in the next release. :slight_smile:

1 Like
5

hi @brandyshea I have just upgraded to 1.2 by replacing ionic.bundle.min.js manually as usual. However, the swiper doesn’t seem working (nothing shown) even I copy and paste the most basic codes. Is there any file I’m missing? Thanks.

6

Did you copy over the css file, too?

8

Yes.
ionic.bundle.min.js, fonts folder & ionic.min.css

9

Hi Brandyshea,
I am at lost with your comment regarding swiper
I am aware Ionic has slider equivalent which apparently is what ionic Slider wraps around swiper

I need to use Swiper because I need to do customization with full control of the pagination widget as in swiper, and the previous and next arrow as in Swiper

you mention i don’t need to import anything. doing it that way, to me, is only be using the Slider… which i fully use but hitting the wall with placement of the pagination widget and the prev/next arrow etc. Also want to do other customization based on the Swiper API

i am unable to import Swiper … maybe by now you have the code for importing Swiper and full use of Swiper

let me know thanks… direct email to alee172pda@runbox.com would be even better

many thanks
Alson