Ionic how to disable slide on swipe screen? - ionic-framework

I have a slide. I want to do slide on button which is done. But i still can slide by gesture. I need to remove my slides from gesture. only slide will do from buttons. Any one can help how can i disable it from gesture ?
Here is my html code
<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>
I just want to do that the user can not slide from screen. they can just do it by buttons

Try this way.It will helps You.
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;
}
demo link:https://stackblitz.com/edit/ionic-p48vuq

Related

How to use 3 ionic-slides in one page and take instance of each ion-slides? [duplicate]

I am using ionic 3 while placing 3 swiper sliders on same page i am unable to control their behavior separately i am bit new for angular js as well ts and ionic
here is code
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
ts is
#ViewChild(Slides) slides: Slides;
goToSlide() {
this.slides.slideTo(2, 500);
}
ngAfterViewInit() {
//this.slides.freeMode = true;
this.slides .slidesPerView=3,
this.slides.spaceBetween=5;
//this.slides.loop=true;
}
Instead of ViewChild, you can use ViewChildren to get all the instances of the slider in that page (Angular docs). Please take a look at this working plunker. The end result would be something like this:
Like you can see in the plunker, we get all the instances of the slider, and then we just get the target instance by using its index:
import { Component, ViewChildren, QueryList } from '#angular/core';
import { NavController, Content, Slides } from 'ionic-angular';
#Component({...})
export class HomePage {
#ViewChildren(Slides) slides: QueryList<Slides>;
constructor() {}
public move(index: number): void {
this.slides.toArray()[index].slideNext(500);
}
}
An then in the view:
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-row>
<ion-col>
<button (click)="move(0)" ion-button text-only>Move First</button>
</ion-col>
<ion-col>
<button (click)="move(1)" ion-button text-only>Move Second</button>
</ion-col>
<ion-col>
<button (click)="move(2)" ion-button text-only>Move Third</button>
</ion-col>
</ion-row>
</ion-content>

Infinite-scroll doen’t fire inside a custom component - ionic 2

I'm working on an ionic application. I’m trying to use an infinite-scroll item in a custom component that contains a segement with two Lists that are showen according to the user's choices.
This is the code of the component :
<ion-content *ngIf="show">
<div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
<ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
MOST TRUSTED
</ion-segment-button>
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
LATEST
</ion-segment-button>
</ion-segment>
</div>
<div no-margin no-padding [ngSwitch]="chx">
<ion-list no-margin no-padding *ngSwitchCase="'most'">
<post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite2($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
<ion-list no-margin no-padding *ngSwitchCase="'recent'">
<page-post-card no-margin *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
</page-post-card>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</div>
</ion-content>
The component is used in an ionic page like this:
<ion-content no-padding>
<topicsearch [show]="showresult"></topicsearch> <!-- This is the custom component -->
<div *ngIf="!showresult" >
<ion-list *ngFor="let top of topics">
<ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
</ion-list>
</div>
</ion-content>
The problem is that the infinite-scroll doesn’t fire when scrolling down in the custom component.
Does anyone have a solution for that ?
Your component using ion-content which including inside another ion-content. Remove ion-content from component.
And also doInfinite function will be declared inside the component ts.

How to fit ion-slides and button in the same page in ionic 3

<ion-content >
<ion-slides loop #Slides>
<ion-slide >
<h2>Slide 1</h2>
</ion-slide>
<ion-slide >
<h2>Slide 2</h2>
</ion-slide>
<ion-slide >
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
<button ion-button full>login</button>
</ion-content>
When I use the code above, I have to scroll down to see the button.
Is there any way to force all the components to be on the same page ?
Add this to your page SCSS:
.scroll-content {
display: flex;
flex-direction: column;
ion-slides {
display: flex;
}
}

Have page slide in from right side ionic

I'm trying to add a transition where a user clicks on a button and the next page slides in from the right side.
Is that easy to do with the Ionic Framework?
I can't seem to find how to do that.
Here is what I have on my view:
<ion-view title="Payment" cache-view="false">
<ion-content padding="false" class="has-header">
<div class="container">
<div class="spacer" style="width: 290px; height: 31px;"></div>
<div class="show-list-numbers-and-dots">
<p style="color:#000000;">Payment Methods</p>
</div>
</div>
<ion-list>
<ion-item class="item-icon-left item-icon-right">
<i class="icon ion-card"></i>.... 2039
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="calm" ui-sref="paymentPage">Add Payment Method</ion-item>
</ion-list>
<div class="spacer" style="width: 290px; height: 44px;"></div>
</ion-content>
</ion-view>
check this from official docs
slides component
First disable swipe and then on button click you can call this function for transition
slideTo(index, speed, runCallbacks)

Ion-slides is shown in the view only if ion-content scroll=false

I need a scrollable page with ion-slides directive. If i set scroll=true in ion-content the slider is not shown on the page. I'm running ionic 1.3.1 and using the new ion-slide directive. This is my code,
<ion-content class="padding" scroll="false">
<div class="list card">
<div class="item no-padding">
<img class="full-image" src="http://12.jpg">
</div>
<div class="item ">
<button class="button icon-left ion-android-navigate button-stable">Directions </button>
<button class="button icon-left ion-ios-telephone button-stable">Call </button>
<button class="button icon-left ion-android-share-alt button-stable">Share</button>
</div>
</div>
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/0000">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
</ion-slides>
</div>
<h4>About </h4>
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</ion-content>
what am i doing wrong, How do i get the ion-slides to work in a scrollable page?
Thanks for any help
How about wrapping the inside of your ion-slide-page with an ion-content like:
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<ion-content has-header="true" padding="true">
<img src="http://placehold.it/375x468/">
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
I would like to note that this should work with Android. I think I had to remove the ion-content for iOS to work on the device.
*Edit - Also, my outside ion-content is set to true