Slides broken in ionic/angular v4

Ionic Framework
1

Hi,
I’ve used sample code provided in https://beta.ionicframework.com/docs/api/slides#usage
in a blank angular project and the result is as shown in the picture.
Also the other slide effects are broken.

Screenshot%20from%202018-07-28%2010-04-38

Thankyou

2

So yes generally speaking there are a couple of issues open regarding slides

But as far as I know none like the one you are facing and I don’t face it

I think that was is broken here is the fact that the way of css styling the height of the slide probably changed

3

Hi,
I just added the slide provided in the example in the ion-content of a fresh new blank project and launched it in the browser.
The height of the slide didn’t change, moreover all the slides appear together as you can see in the image.
Thanks!

4

That’s really weird, I mean I have migrated 3 different slides in 3 pages and didn’t face the problem. Could you display your code?

But like I said, there are still open issues about slides, after all it is still in beta

5

Hi,
Below there’s the code in home.page.html and home.page.ts, I didn’t change anything else in the blank starter project.
Thanks for your help.

home.page.html

<ion-header>
	<ion-toolbar>
		<ion-title>
			Ionic Blank
		</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content padding>
	<!-- Test Slides -->
	<ion-slides pager="true" [options]="slideOpts">
		<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>
</ion-content>

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  slideOpts = {
    effect: 'flip'
  };

  constructor() {}
}
6

Could you give a try without the options respectively without [options]="slideOpts"?

How does the scss looks like?

7

The scss files are empty.
Without options the slide effect applies, which works but the slides are not 100% height, see below the chrome preview (same problem on firefox, where moreover the pager is missing).
Thank you.

Screenshot%20from%202018-07-28%2011-57-29
Screenshot from 2018-07-28 11-57-29.png400×555 3.51 KB

8

Ok so I understand two things:

  1. The height I would say is correct, I think you have to set a height in your scss file and that will be ok

  2. About the options, if that doesn’t work, you may want to report it in the git tracker since your code is 1/1 the same as in the documentation

9

Hi Gattari, I am experiencing exactly the same problem on Ionic 4.2.1.
Did you find a solution?

Rad

10

I fixed this issue by set height:100%; width:100%:
<ion-slides autoplay=“0” loop=“false” style=“height: 100%;”>

<ion-slide>

<custom-component style=“height:100%; width:100%”></custom-component>

</ion-slide>

<ion-slide>

<h1>Slide 2</h1>

</ion-slide>

<ion-slide>

<h1>Slide 3</h1>

</ion-slide>

</ion-slides>

1 Like