CODEWITHSUNDEEP
angularionic-frameworkionic3
Ryan Coolwebs
Ryan Coolwebs

Reputation: 1631

Conditional nav on ionic slider

I have configured my Ionic slider to have nav buttons as I am developing a PWA and want to include mouse interactions on desktops. I wanted to have some conditionals run to hide the PREV button when slider is at beginning and hide the NEXT button when on the last slide. I checked out solution at Hide and show on click in the ionic 2 and made some code work for this.

My issue is that the PREV button is not automatically hidden when Ionic slider is first presented. I cannot get this to work for me as I have initiated the check using the slideChanged() method and I don't know how to hide the PREV button on initiation (before interacting with slider).

Here is my code:

TS File:

slideChanged() {
    if (this.slides.isEnd()) {
        this.hideNext = !this.hideNext;
    }
    else if (this.slides.isBeginning()) {
        this.hidePrev = !this.hidePrev;
    }
    else {
        console.log("slide changed");
        this.hideNext = true;
        this.hidePrev = true;
    }
}

HTML Template

<ion-icon *ngIf="hidePrev" name="ios-arrow-back" float-left class="slideNav prevSlide" (click)="prevSlide()"></ion-icon>
<ion-icon *ngIf="hideNext" name="ios-arrow-forward" float-right class="slideNav nextSlide" (click)="nextSlide()"></ion-icon>
<ion-slides (ionSlideDidChange)="slideChanged()" pager #imageSlides>
    <ion-slide *ngIf="data.video">
        <video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
            <source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
        </video>
    </ion-slide>
    <ion-slide *ngFor="let image of data.featured_image">
        <img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
    </ion-slide>
</ion-slides>

Upvotes: 1

Views: 1460

Answers (2)

Galvagno
Galvagno

Reputation: 1

with Ionic 2, change slideChanged() like this

slideChanged() {
  this.hideNext = !this.slides.isEnd();
  this.hidePrev = !this.slides.isBeginning();
}

with Ionic 3, 4 & 5 (with Promises), change slideChanged() like this

slideChanged() {
  this.slides.isEnd()
    .then(s => this.hideNext = !s }

  this.slides.isBeginning()
    .then(s => this.hidePrev = !s }
}

Upvotes: 0

JeRivals
JeRivals

Reputation: 264

You can use ionSlideReachEnd and ionSlideReachStart events :

TS File

slideChanged() {
  if (this.slides.isEnd()) {
    this.hideNext = !this.hideNext;
  }
  else if (this.slides.isBeginning()) {
    this.hidePrev = !this.hidePrev;
  }
  else {
    console.log("slide changed");
    this.hideNext = true;
    this.hidePrev = true;
  }
}

reachedStart() {
    this.hidePrev = true;
}

reachedEnd() {
    this.hideNext = true;
}

HTML Template

<ion-icon *ngIf="hidePrev" name="ios-arrow-back" float-left class="slideNav prevSlide" (click)="prevSlide()"></ion-icon>
<ion-icon *ngIf="hideNext" name="ios-arrow-forward" float-right class="slideNav nextSlide" (click)="nextSlide()"></ion-icon>
<ion-slides (ionSlideDidChange)="slideChanged()" (ionSlideReachEnd)="reachedEnd()" (ionSlideReachStart)="reachedStart()" pager #imageSlides>
  <ion-slide *ngIf="data.video">
    <video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
        <source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
    </video>
  </ion-slide>
  <ion-slide *ngFor="let image of data.featured_image">
    <img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
  </ion-slide>
</ion-slides>

Upvotes: 3

Related Questions