Ion-slides dynamically change direction at runtime

Ionic Framework ionic-v3
1

I’d like to dynamically change the direction of the ion-slides component at runtime.

The problem is, whenever I change the direction the ion-slides component breaks - no errors are thrown but the slides disappear after a single swipe.

I’m guessing certain parameters are set at the component’s initialization stage, and I need to readjust them somehow when I change the direction.

How should I do it?

<div style="height: 90%">
    <ion-slides [direction]="directionVertical ? 'vertical' : 'horizontal'">
        <ion-slide>Slide 1</ion-slide>
        <ion-slide>Slide 2</ion-slide>
        <ion-slide>Slide 3</ion-slide>
    </ion-slides>
</div>

<button ion-button block (click)="directionVertical = directionVertical ? false : true">Change Direction : {{ directionVertical ? 'vertical' : 'horizontal' }}</button>
2

If you don’t get any better answers, you could fake it by having two separate <ion-slides> components always in the DOM, so “switching direction” would just consist of swapping [hidden] bindings.

<ion-slides direction="vertical" [hidden]="!directionVertical"></ion-slides>
<ion-slides direction="horizontal" [hidden]="directionVertical"></ion-slides>
3

Yup I’ve already been working on that direction for the past few hours.

  1. If I use hidden the components are not “swapped”, they’re broken, and generally it’s just a huge mess.
  2. If I use ngIf it works for the component that was in the DOM first, but as soon as I swap to the other one I’m getting this error:

Runtime Error
Cannot read property ‘length’ of undefined

TypeError: Cannot read property ‘length’ of undefined
at slideTo (http://localhost:8100/build/main.js:45186:36)
at Slides.slideTo (http://localhost:8100/build/main.js:56479:95)

When doing it like that I need to first let both components be added to the DOM in order for them to be initialized and also so that I can get their references using @ViewChild. I’m using an extra “initialized” boolean for that.

I also tried tracking the elements in runtime via @ViewChildren instead of just during initialization in case the elements are recreated each time they are added and removed from the DOM, I’m getting the same error.

It’d be great if you have any ideas how to solve that, or preferably, how to do it with one component.

Basically what I’m trying to do is swipe images in and out of the screen from all 4 directions, in case there might be a better way to do it than to use ion-slides.

For instance, an image is centered on the screen, the user swipes right - it is tweened right and a new image is tweened from the left towards the center of the screen. Like that for all 4 directions.

The swipes are detected separately, I’m not using ion-slides input, I’m literally using it only for the slides tween.

I was able to build a working solution by tweening images myself via a custom solution in all 4 directions without ion-slides, but there I’m having troubles responsively resizing the images to screen size, positioning them and tweening them accordingly. So it works, but images appear one over the other when tweened, they start at wrong positions, etc.

1 Like
4

Does anybody have any idea?