ionic2 slider not working on android

[kingleroyg]

Short description of the problem:

After loading a page my slider doesn't work correctly (show only 1 bullet point and slide don't work), but after resizing page, bullets have a right number and slider work correctly.

The slider works for IOS but not for android(both in serve and device)

What behavior are you expecting?

Slider not sliding

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) Forum where multiple people had the issue

Which Ionic Version? 1.x or 2.x 2.x

Plunker that shows an example of your issue

Its a android issue.

gif example

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.

6.2.0

Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.3.0
Xcode version: Xcode 7.3.1 Build version 7D1014 

[Manduro]

Have a look at #7089 :)

[jgw96]

Hey @kingleroyg ! Thanks for opening an issue with us! This is actually already fixed for the beta.11 release so i will be closing this issue for now. Thanks for using Ionic! Also the issue @Manduro linked too has more info on it, thanks @Manduro !

[alejandrocao]

I'm still getting the same behavior as @kingleroyg, only one bullet, after resizing page in web browser or change orientation in ionic view app on the phone I get the 3 bullets and the slider works

Your system information:

Cordova CLI: 6.3.0 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Node Version: v6.3.0

[LufoX11]

Hi. I've just downloaded a fresh beta 11 install and the slides issue is still there.

[bentzibentz]

Any news on that? Got the same issue in beta 11

[alejandrocao]

Try that:

ionic info

Your system information:

Cordova CLI: 6.3.0 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Node Version: v6.3.0

ionic start SlidesPOC blank --v2

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  The world is your oyster.
  <ion-slides #mySlider [options]="mySlideOptions">
    <ion-slide>
      <img src="img/slide1.png" />
    </ion-slide>
    <ion-slide>
      <img src="img/slide2.png" />
    </ion-slide>
    <ion-slide>
      <img src="img/slide3.png" />
    </ion-slide>
  </ion-slides>
</ion-content>

home.css

.home {

}

ion-slide img {
  height: 70vh !important;
  width: auto !important;
}

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  @ViewChild('mySlider') slider: Slides;

  mySlideOptions = {
    initialSlide: 0,
    loop: false,
    pager: true
  };

  constructor(public navCtrl: NavController) {

  }
}

Copy the images under www/img folder.

That works for me, try and let me now!

[aldo-roman]

Hi, I'm still having this issue. I can only slide after changing phone orientation or window resize.

Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0 ios-deploy version: 1.8.6 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v5.3.0 Xcode version: Xcode 8.0 Build version 8A218a