Ionic 3 Slides 组件 - 实现下一个和上一个按钮

Question

我是 IONIC 3 的新手，我尝试在我的 Ionic 应用程序中实现滑块，并尝试为幻灯片实现下一个和上一个按钮。

赞：

请帮助我了解它的功能。

Answer 1

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

this.slides.slideTo(2, 500);

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

要切换到上一张或下一张幻灯片，您可以使用 slideNext() 和 slidePrev() 函数或保存当前幻灯片的索引并简单地递增或递减它，同时将其作为slideTo() 函数的参数。

Answer 2

您可以自定义下一个、上一个按钮，如下图所示

图像和完整教程来源：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;
    });
    }

Ionic 3 Slides 组件 - 实现下一个和上一个按钮

Ionic 3 Slides Component - Implement next and previous button

angular

typescript

slider

ionic3

swiper