如何在滑动屏幕上禁用幻灯片?

问题描述 投票:0回答:1

我有一张幻灯片。我想在按钮上滑动完成。但是我仍然可以通过手势滑动。我需要从手势中删除幻灯片。仅幻灯片可以通过按钮执行。任何人都可以帮助我如何从手势禁用它?

这是我的html代码

<ion-content>

<div class="slide-box">
        <ion-slides pager="true" >
            <!-- Slide 1 -->
            <ion-slide>
                <div>
                    <img src="../../assets/img/welcome.jpg"/>
                    <h2>
                       AI Generated Photos
                    </h2>
                    <ion-label color="gray" >
                        All the photos are generated with artificial intelligence
                    </ion-label>
                </div>
            </ion-slide>
            <!-- Slide 2 -->
            <ion-slide>
                <div>
                    <img src="../../assets/img/welcome.jpg"/>
                    <h2>
                       Download Your Photos
                    </h2>
                    <ion-label color="gray" >
                        Select the photo you like to download the photos by buying them
                    </ion-label>
                </div>
            </ion-slide>
            <!-- Slide 3 -->
            <ion-slide>
                <div>
                    <img src="../../assets/img/welcome.jpg"  />
                    <h2>
                        Follow Us Instagram
                    </h2>
                    <ion-label color="gray" >
                        You can follow us on instagram to download the photos for free
                    </ion-label>
                </div>
            </ion-slide>
        </ion-slides>
</div>


</ion-content>

<ion-footer style="margin-bottom: 7%;" no-border>
    <div style="display: flex; justify-content: center;" (click)="next(slides)" *ngIf="next1">
      <ion-button expand="block" class="btn">NEXT</ion-button>
    </div>

    <div style="display: flex; justify-content: center;" (click)="nextd(slides)" *ngIf="next2">
      <ion-button expand="block" class="btn">NEXT</ion-button>
    </div>

    <div style="display: flex; justify-content: center;"  (click)="login()" *ngIf="start" >
      <ion-button expand="block" class="btn">GET STARTED</ion-button>
    </div>
</ion-footer>

我只想让用户无法从屏幕上滑动。他们可以通过按钮来完成

ionic-framework ionic4
1个回答
0
投票

尝试这种方式。它将对您有帮助。

HTML:

<ion-slides pager="true" #slider>
Your code here.....
</ion-slides>

TS:

import { Component ,ViewChild} from '@angular/core';
export class HomePage {
@ViewChild('slider') slider;
  constructor(public navCtrl: NavController) {

  }
ionViewDidLoad(){
    this.slider.onlyExternal = true;
}

演示链接:https://stackblitz.com/edit/ionic-p48vuq

© www.soinside.com 2019 - 2024. All rights reserved.