Ionic 3 Slides Component - Implement next and previous button

Question

I am new in IONIC 3, I try to implement Slider in my Ionic App and I try to Implement next and previous button for slide.

Like:

Please help me for its functionality.

Answer 1

According to the official documentation here , you can call either the slideTo() or slideNext() methods. For example (taken from the official Ionic v2+ documentation):

this.slides.slideTo(2, 500);

This would take you to the third slide, with a transition time of 500ms.

For changing to the previous or next slide you could either use the slideNext() and slidePrev() functions or save an index for the current slide and simply increment or decrement it, while passing it as a parameter to the slideTo() function.

Answer 2

You can have custom Next, Previous buttons as shown in Image below

Image & Complete Tutorial Source : Link

home.page.html

  <ion-grid>
<ion-row>
  <ion-col size="1">
    <span class="slider-nav arrow-prev"
      (click)="slidePrev(sliderOne,slideWithNav)">
      <div class="prev-icon-custom custon-nav"
        [class.disabled]="sliderOne.isBeginningSlide"></div>
    </span>
  </ion-col>
  <ion-col size="10">

    <ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
      (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
      <ion-slide *ngFor="let s of sliderOne.slidesItems">
        <img src="../../assets/images/{{s.id}}.jpg">
      </ion-slide>
    </ion-slides>

  </ion-col>
  <ion-col size="1">
    <span class="slider-nav arrow-next"
      (click)="slideNext(sliderOne,slideWithNav)">
      <div class="next-icon-custom custon-nav"
        [class.disabled]="sliderOne.isEndSlide"></div>
    </span>
  </ion-col>
</ion-row>

home.page.ts

    @ViewChild('slideWithNav') slideWithNav: Slides;
    sliderOne: any;

    //Configuration for each Slider
    slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay:true
    };

    constructor(
    ) {
    //Item object for Nature
    this.sliderOne =
        {
        isBeginningSlide: true,
        isEndSlide: false,
        slidesItems: [
        {
            id: 1,
            image: '../../assets/images/1.jpg'
            },
            {
            id: 2,
            image: '../../assets/images/2.jpg'
            },
            {
            id: 3,
            image: '../../assets/images/3.jpg'
            },
            {
            id: 4,
            image: '../../assets/images/4.jpg'
            },
            {
            id: 5,
            image: '../../assets/images/5.jpg'
            }
        ]
        };

    }

    //Move to Next slide
    slideNext(object, slideView) {
    slideView.slideNext(500).then(() => {
        this.checkIfNavDisabled(object, slideView);
    });
    }

    //Move to previous slide
    slidePrev(object, slideView) {
    slideView.slidePrev(500).then(() => {
        this.checkIfNavDisabled(object, slideView);
    });;
    }

    //Method called when slide is changed by drag or navigation
    SlideDidChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);
    }

    //Call methods to check if slide is first or last to enable disbale navigation  
    checkIfNavDisabled(object, slideView) {
    this.checkisBeginning(object, slideView);
    this.checkisEnd(object, slideView);
    }

    checkisBeginning(object, slideView) {
    slideView.isBeginning().then((istrue) => {
        object.isBeginningSlide = istrue;
    });
    }
    checkisEnd(object, slideView) {
    slideView.isEnd().then((istrue) => {
        object.isEndSlide = istrue;
    });
    }