Ionic 3幻灯片组件 - 实现下一个和上一个按钮

Question

我是IONIC 3的新手，我尝试在我的Ionic App中实现Slider，并尝试实现下一个和上一个幻灯片按钮。

喜欢：

请帮我看看它的功能。

Answer 1

根据此处的官方文档，您可以调用slideTo()或slideNext()方法。 例如（取自官方的Ionic v2 +文档）：

this.slides.slideTo(2, 500);

这将带您进入第三张幻灯片，过渡时间为500毫秒。

要更改为上一张或下一张幻灯片，您可以使用slideNext()和slidePrev()函数，也可以保存当前幻灯片的索引，只需将其递增或递减，同时将其作为参数传递给slideTo()函数。

Answer 2

您可以使用自定义Next，Previous按钮 ，如下图所示

图像和完整教程来源 ： 链接

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;
    });
    }