title: How can I create a button at the end of a slider which can change and can show the next slides in Ionic 4?
body: <p>I am trying to add a button under the slider which when pressed should move me to the next slide on the slider. On the last slide I want the button to change. I have tried several functions like the Swipenext and the nex functions but still it is not working an I'm receiving a lot of errors. When I press the next button at the end of the page to go to the next slide, I get two errors on the console and the button does not work. One error states that "Cannot read property 'getactiveindex' of undefined" which is part of the next function in the .ts file, on the local terminal there are no errors and it compiles successfully. I am also trying to change the text in the last slide and I have tried the ionslidechange() function and it is not working</p>
  
  <pre><code>home.html
  &lt;ion-content&gt;
      &lt;ion-row&gt;  
          &lt;ion-col&gt;
  
      &lt;div class="ion-text-right"&gt;
  
          &lt;ion-buttons slot="start"&gt;
              &lt;ion-back-button&gt;&lt;/ion-back-button&gt;
  
            &lt;ion-title&gt;
                &lt;ion-button  routerDirection="root" [routerLink]="['/home-ar']"&gt;
             العربية
            &lt;/ion-button&gt;
            &lt;/ion-title&gt;
  
          &lt;/ion-buttons&gt;
  
          &lt;/div&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
      &lt;ion-slides 
      [options]="slideOpts" autoplay="false"  (ionSlideDidChange)="ionSlideChange(slides)" pager&gt;
        &lt;ion-slide&gt;
            &lt;ion-img cache="true" src="../assets/Slides/_logo.png"&gt;&lt;/ion-img&gt;
            &lt;div class="-color1"&gt;
            &lt;h1&gt;Hi, Welcome!&lt;/h1&gt;
            &lt;/div&gt;
            &lt;H3&gt;The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.&lt;/H3&gt;
        &lt;/ion-slide&gt;
        &lt;ion-slide&gt;
            &lt;h1&gt;Slide 2&lt;/h1&gt;
          &lt;/ion-slide&gt;
          &lt;ion-slide&gt;
              &lt;h1&gt;Slide 3&lt;/h1&gt;
            &lt;/ion-slide&gt;
            &lt;ion-slide&gt;
                &lt;h1&gt;Slide 4&lt;/h1&gt;
              &lt;/ion-slide&gt;
              &lt;ion-slide&gt;
                  &lt;h1&gt;Slide 5&lt;/h1&gt;
                &lt;/ion-slide&gt;
      &lt;/ion-slides&gt;
      &lt;ion-button 
       expand="full" 
       color="Blue" 
       size="large" 
       (click)="next()"&gt;
       &lt;div class="parent"&gt;  {{buttonName}}  &lt;/div&gt;
      &lt;/ion-button&gt;
    &lt;/ion-content&gt;
  
  home.ts
  import { Component, ViewChild, ViewChildren } from '@angular/core';
  import { IonSlides } from '@ionic/angular';
  import { Slides } from 'ionic-angular';
  
  
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  
  export class HomePage {
  
    @ViewChildren('slides') slides: IonSlides;
    buttonName = "Next";
    selectedSlide :any;
    slideOpts = {
      loop: true,
      autoplay: true
    };
  
  
    constructor() {}
  
    ionSlideChange(slides){
      this.selectedSlide = slides;
  
      slides.getActiveIndex().then(
     (slidesIndex)=&gt;{
              if (slidesIndex == 5){
                this.buttonName = "Continue";
              } else{
                this.buttonName = "Next";
          }
        });
    }
  
    next(){
      this.selectedSlide.getActiveIndex().then((slidesIndex) =&gt; {
        if(slidesIndex == 5){
          console.log("Done Slider");
        } else {
          this.selectedSlide.slideNext();
        }
      });
    }
  }
  
  
   Console when I press the next button
  
   ERROR TypeError: slides.getActiveIndex is not a function
      at HomePage.ionSlideChange (home.page.ts:29)
      at Object.eval [as handleEvent] (HomePage.html:22)
      at handleEvent (core.js:38098)
      at callWithDebugContext (core.js:39716)
      at Object.debugHandleEvent [as handleEvent] (core.js:39352)
      at dispatchEvent (core.js:25818)
      at core.js:37030
      at HTMLElement.&lt;anonymous&gt; (platform-browser.js:1789)
      at ZoneDelegate.invokeTask (zone-evergreen.js:391)
      at Object.onInvokeTask (core.js:34182)
  View_HomePage_0 @ HomePage.html:21
  proxyClass @ compiler.js:19436
  logError @ core.js:39651
  handleError @ core.js:9162
  dispatchEvent @ core.js:25822
  (anonymous) @ core.js:37030
  (anonymous) @ platform-browser.js:1789
  invokeTask @ zone-evergreen.js:391
  onInvokeTask @ core.js:34182
  invokeTask @ zone-evergreen.js:390
  runTask @ zone-evergreen.js:168
  invokeTask @ zone-evergreen.js:465
  invokeTask @ zone-evergreen.js:1603
  globalZoneAwareCallback @ zone-evergreen.js:1629
  emit @ core-ca0488fc.js:1999
  (anonymous) @ swiper.bundle-ccdaac54.js:1078
  (anonymous) @ swiper.bundle-ccdaac54.js:1077
  emit @ swiper.bundle-ccdaac54.js:1071
  transitionEnd$1 @ swiper.bundle-ccdaac54.js:1906
  slideTo @ swiper.bundle-ccdaac54.js:1994
  init @ swiper.bundle-ccdaac54.js:3919
  Swiper @ swiper.bundle-ccdaac54.js:3762
  initSwiper @ ion-slide_2-md.entry.js:231
  async function (async)
  initSwiper @ ion-slide_2-md.entry.js:229
  (anonymous) @ ion-slide_2-md.entry.js:71
  invoke @ zone-evergreen.js:359
  run @ zone-evergreen.js:124
  (anonymous) @ zone-evergreen.js:855
  invokeTask @ zone-evergreen.js:391
  runTask @ zone-evergreen.js:168
  drainMicroTaskQueue @ zone-evergreen.js:559
  Promise.then (async)
  scheduleMicroTask @ zone-evergreen.js:542
  scheduleTask @ zone-evergreen.js:381
  scheduleTask @ zone-evergreen.js:211
  scheduleMicroTask @ zone-evergreen.js:231
  scheduleResolveOrReject @ zone-evergreen.js:845
  then @ zone-evergreen.js:955
  nextTick @ core-ca0488fc.js:156
  (anonymous) @ core-ca0488fc.js:95
  (anonymous) @ core-ca0488fc.js:1219
  then @ core-ca0488fc.js:1341
  scheduleUpdate @ core-ca0488fc.js:1219
  schedule @ core-ca0488fc.js:1764
  initializeComponent @ core-ca0488fc.js:1775
  async function (async)
  initializeComponent @ core-ca0488fc.js:1713
  (anonymous) @ core-ca0488fc.js:1851
  invoke @ zone-evergreen.js:359
  run @ zone-evergreen.js:124
  (anonymous) @ zone-evergreen.js:855
  invokeTask @ zone-evergreen.js:391
  runTask @ zone-evergreen.js:168
  drainMicroTaskQueue @ zone-evergreen.js:559
  Promise.then (async)
  scheduleMicroTask @ zone-evergreen.js:542
  scheduleTask @ zone-evergreen.js:381
  onScheduleTask @ zone-evergreen.js:272
  scheduleTask @ zone-evergreen.js:372
  scheduleTask @ zone-evergreen.js:211
  scheduleMicroTask @ zone-evergreen.js:231
  scheduleResolveOrReject @ zone-evergreen.js:845
  resolvePromise @ zone-evergreen.js:791
  (anonymous) @ zone-evergreen.js:707
  webpackJsonpCallback @ bootstrap:25
  (anonymous) @ home-home-module.js:1
  HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}
  </code></pre>