Блог

Главная - Вопросы по программированию - Как перейти вручную к следующему слайду в ion-slide

Как перейти вручную к следующему слайду в ion-slide

#ionic-framework #ionic4

#ionic-framework #ionic4

Вопрос:

Я использую ion-slide в ionic4, и я хочу перейти к следующему слайду вручную, нажав на кнопку. Я видел документацию ion-slide, в которой они упоминают метод slideNext. Но я не знаю, как использовать этот метод для смены слайда.

Ответ №1:

Да, я нашел решение. В ionic 4 вам нужно импортировать IonSlides вместо слайдов.

home.ts

 import { IonSlides} from '@ionic/angular';


 export class HomePage {

      @ViewChild('mySlider')  slides: IonSlides;

      swipeNext(){
        this.slides.slideNext();
      }

    }

home.html

  <ion-slides pager="true"  pager="false" #mySlider>

   <ion-slide>
   </ion-slide>

   <ion-slide>
   </ion-slide>

    <ion-button (click)="swipeNext()">Next</ion-button>

 </ion-slides>

Комментарии:

1.Привет @Tahseen, можете ли вы разработать горизонтальную прокрутку внутри ссылки ion-slide . Url

2. Есть ли способ перейти к последней стороне по щелчку?

Ответ №2:

В Angular 8 :

 @ViewChild('mySlider', { static: true }) slides: IonSlides;

Ответ №3:

Просто и просто необходимо в html

 <ion-slides #slides pager="true">
   <ion-slide>1
   </ion-slide>

   <ion-slide>2
   </ion-slide>
 </ion-slides>

  <ion-button (click)="slides.slidePrev()" > Prev </ion-button>
  <ion-button (click)="slides.slideNext()" > Next </ion-button>

Ответ №4:

Простой способ (такой же, как и в приведенном выше ответе, но я попытался упростить его):

 import { Slides } from 'ionic-angular';

class abc {
  @ViewChild(Slides)slides: Slides;

  public next(){
    this.slides.slideNext();
  }

  public prev(){
    this.slides.slidePrev();
  }
}

Метки: