# Slides with orientation change

**URL:** <https://forum.ionicframework.com/t/slides-with-orientation-change/79460>\
**Category:** ionic-v3\
**Created:** [February 13, 2017, 5:02pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460 "2017-02-13T17:02:27Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 13, 2017, 5:02pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/1 "2017-02-13T17:02:27Z")

</div>

i have slides with some text. However, when changing orientation, those text are not repositioned.  
Is there a way to re-render the slides when orientation is changed? This was working fine with RC3, but with the latest release, this seems broken.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 7:17am UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/2 "2017-02-14T07:17:47Z")

</div>

@mhartington any clue?

---

<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:** [February 14, 2017, 3:56pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/3 "2017-02-14T15:56:04Z")

</div>

What platform are you testing on? There doesn’t seem to be an issue with 2.0.1?  
Could you share some code too?

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 4:28pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/4 "2017-02-14T16:28:19Z")

</div>

```auto
<ion-slides #oneSlider *ngIf="getSettings().read === 'one'"
    direction="vertical"
    pager="true"
    paginationType="progress"
    zoom="true"
    [effect]="getSettings().effect"
    (ionSlideDidChange)="slideChange()"
    (click)="touchHelp()">
    <ion-slide *ngFor="let item of getItemList()" (swipe)="swipeEvent($event)" (press)="pressEvent($event)">
        <div class="home-content">
            {{ item }}
        </div>
    </ion-slide>
</ion-slides>

```

I have this in my home.ts  
was working fine in RC3.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 4:32pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/5 "2017-02-14T16:32:12Z")

</div>

Also I have updated to 2.0.1 as well.

```auto
.home-content {
padding: 0px 50px;
}

```

i also have this.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 4:38pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/6 "2017-02-14T16:38:04Z")

</div>

@mhartington it looks like having `direction="vertical"` is breaking it.  
I had it previously, but working fine. If i remove that attribute then it’s fine.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 4:40pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/7 "2017-02-14T16:40:01Z")

</div>

@mhartington is it possible to call `mySwiper.onResize();` event which is supported in iSwiper library? calling `ionSlide.update()` doesn’t seem to work after detecting orientation change event.

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 4:45pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/8 "2017-02-14T16:45:16Z")

</div>

Android, iOS, browser, tested all. None of them works with `direction="vertical"` option.

---

<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:** [February 14, 2017, 5:08pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/9 "2017-02-14T17:08:53Z")

</div>

Mind opening an issue for this, seems like it’s not fixable at the moment

---

<div class="post-metadata">

**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\
**Post date:** [February 14, 2017, 5:10pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/10 "2017-02-14T17:10:55Z")

</div>

@mhartington yeah, i will do. So sad that i can’t do anything with this. For now, I’ll fix my app to allow portrait mode only… (cry).

---

<div class="post-metadata">

**Author:** ![anthonymoles](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anthonymoles/32/110873_2.png) [@anthonymoles](https://forum.ionicframework.com/u/anthonymoles)\
**Post date:** [June 23, 2017, 12:43pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/11 "2017-06-23T12:43:58Z")

</div>

@ozexpert I found a workaround: if you add \*ngIf to the ionic-slides element, set the boolean to false and then true in the onorientchange event callback it re-instantiates the slides element with the correct dimensions for the screen orientation.

---

<div class="post-metadata">

**Author:** ![akhiilsanker](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@akhiilsanker](https://forum.ionicframework.com/u/akhiilsanker)\
**Post date:** [June 6, 2018, 8:28am UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/12 "2018-06-06T08:28:20Z")

</div>

Hi @anthonymoles,

I am facing the same issue in my app. Can you please explain more about the workaround?  
Which attribute is to be handled?

Thanks.

---

<div class="post-metadata">

**Author:** ![armandovillalta](https://avatars.discourse-cdn.com/v4/letter/a/c57346/32.png) [@armandovillalta](https://forum.ionicframework.com/u/armandovillalta)\
**Post date:** [October 10, 2020, 5:25pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/13 "2020-10-10T17:25:00Z")

</div>

If any one still having this issue I “solved” it like this:

**TS:**

```auto
ngOnInit() {
    this.platform.resize.subscribe( () => {
      this.handleSlideResize();
    });
  }

```

```auto
handleSlideResize() {
    this.hideSlides = true;
    setTimeout(() => {
      this.hideSlides = false;
    }, 10);
  }

```

**HTML:**

`<ion-slides *ngIf="!hideSlides">`

(Of course leave your options,reference… in the ion-slides)

Small timeout function. If you change the boolean too quick it wont work, you should at least have 1ms. I put 10 for testing.

Cheers!

---

<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, 8:53pm UTC](https://forum.ionicframework.com/t/slides-with-orientation-change/79460/14 "2021-07-19T20:53:58Z")

</div>

Closed on July 19, 2021, 8:53pm UTC