# Slides broken in ionic/angular v4

**URL:** <https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555>\
**Category:** Ionic Framework\
**Created:** [July 28, 2018, 8:08am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555 "2018-07-28T08:08:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gattari](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gattari](https://forum.ionicframework.com/u/Gattari)\
**Post date:** [July 28, 2018, 8:08am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/1 "2018-07-28T08:08:52Z")

</div>

Hi,  
I’ve used sample code provided in [https://beta.ionicframework.com/docs/api/slides#usage](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](https://global.discourse-cdn.com/ionicframework/original/3X/7/7/779bba334ccc4593120a0d5b5af39e975fc0d2d6.png)

Thankyou

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 28, 2018, 8:24am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/2 "2018-07-28T08:24:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gattari](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gattari](https://forum.ionicframework.com/u/Gattari)\
**Post date:** [July 28, 2018, 8:35am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/3 "2018-07-28T08:35:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 28, 2018, 8:36am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/4 "2018-07-28T08:36:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gattari](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gattari](https://forum.ionicframework.com/u/Gattari)\
**Post date:** [July 28, 2018, 9:27am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/5 "2018-07-28T09:27:07Z")

</div>

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

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

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

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

  slideOpts = {
    effect: 'flip'
  };

  constructor() {}
}

```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 28, 2018, 9:41am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/6 "2018-07-28T09:41:21Z")

</div>

> [@Gattari](#):
>
> [options]=“slideOpts”

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

How does the scss looks like?

---

<div class="post-metadata">

**Author:** ![Gattari](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gattari](https://forum.ionicframework.com/u/Gattari)\
**Post date:** [July 28, 2018, 10:02am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/7 "2018-07-28T10:02:46Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/0/7/07ed04731b86e7aaafa057c1bec7101172a3ae8f.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 28, 2018, 10:13am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/8 "2018-07-28T10:13:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![raddy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/raddy/32/121520_2.png) [@raddy](https://forum.ionicframework.com/u/raddy)\
**Post date:** [October 11, 2018, 10:17am UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/9 "2018-10-11T10:17:03Z")

</div>

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

Rad

---

<div class="post-metadata">

**Author:** ![makakura](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@makakura](https://forum.ionicframework.com/u/makakura)\
**Post date:** [October 27, 2018, 12:46pm UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/10 "2018-10-27T12:46:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:28pm UTC](https://forum.ionicframework.com/t/slides-broken-in-ionic-angular-v4/136555/11 "2021-07-19T21:28:39Z")

</div>

Closed on July 19, 2021, 9:28pm UTC