I want show pager dots by default in ion-slide-box :
i tried like this :
<ion-slide-box [options]="{pagination: true}">
<ion-slide>
<p> slide 1 </p>
</ion-slide>
<ion-slide>
<p> slide 2 </p>
</ion-slide>
</ion-slide-box>
but it didn't work for please help.
<ion-slides>
<ion-slide-box [options]="{pagination: true}">
<ion-slide>
<p> slide 1 </p>
</ion-slide>
<ion-slide>
<p> slide 2 </p>
</ion-slide>
</ion-slide-box>
</ion-slides>
Related
I have two ionic slides, each containing a regular list.
My problem is that each time I scroll on one of them, the other scrolls at the same time.
Is there a way of making each list scroll individually?
My code somewhat like this:
<ion-content>
<ion-slides>
<ion-slide>
<ion-list>
...
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
...
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
Figured it out.
I made it so the ion-content would be inside the slide, so that I could have my ion-lists separated :
<ion-slides>
<ion-slide>
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-slide>
<ion-slide>
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-slide>
</ion-slides>
Also, I added this css:
ion-slides, ion-slide {
height: 100% !important;
}
.swiper-container {
margin: unset;
}
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
I am using Ionic 4 and i want to trigger slideNext() in my custom function but I don't know how to call slideNext(). Can anyone help me. This is my html code.
<ion-slides pager="true">
<ion-slide class="step-one">
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 1</h1>
<p>Text</p>
</ion-slide>
<ion-slide class="step-two" *ngIf = "verificationCodeSent == 1">
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 2</h1>
<p>Text</p>
</ion-slide>
<ion-slide class="step-three" *ngIf = "verificationDone == 1">
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 3</h1>
<p>Text</p>
<ion-button (click)="finish()">FINISH TUTORIAL!</ion-button>
</ion-slide>
</ion-slides>
heres one example of how to use it
.html
<ion-slides pager="true" #theSlides>
<ion-slide class="step-one" (click)="move(theSlides)">
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 1</h1 >
<p>Text</p>
</ion-slide>
<ion-slide class="step-two" >
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 2</h1>
<p>Text</p>
</ion-slide>
<ion-slide class="step-three" >
<ion-img src="/assets/icon/favicon.png"></ion-img>
<h1>Heading 3</h1>
<p>Text</p>
<ion-button (click)="finish()">FINISH TUTORIAL!</ion-button>
</ion-slide>
.ts
move(slides){
console.log(slides)
slides.slideTo(2)
}
Pass a reference (#theSlides) to the slide in the custom function (move(theSlides))
Please check code below, I want to flip my slides but this won't getting applied.I am new in Ionic and trying hard to get it resolve but no effects getting applied.
<ion-slides pager #mainslider [effect]=flip>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<button type="submit" ion-button color="primary" class="btnNext" (click)="next()">Next holiday</button>
<button type="submit" ion-button color="primary" class="btnNext" (click)="prev()">Next holiday</button>
</ion-slides>
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
ionViewWillEnter() {
this.slides.onlyExternal = true;
this.slides.effect = 'flip';
this.slides.paginationType = 'fraction';
this.slides.pager = false;
}
You should use effect property like this effect="flip"
<ion-slides pager #mainslider effect="flip">
<ion-slide style="background-color: aquamarine">
<h1>Slide 1</h1>
</ion-slide>
<ion-slide style="background-color:lightblue;">
<h1>Slide 2</h1>
</ion-slide>
<ion-slide style="background-color:darkcyan;">
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
I have a couple of slides which have dynamic content that is added to them. The problem is the content inside of the slides doesn't scroll. So if I have a lot of items only some show and there is no ability to slide. How can I make it so the content in my lists slides inside of their slides?
<ion-content>
<ion-slides (change)="onSlideChanged($event)">
<ion-slide >
<ion-list>
<ion-item *ngFor="#item of items1; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="#item of items2; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
I have the same problem,and I solve it like this:
<ion-slides style="height: auto">
<ion-slide *ngFor="#item of items">
<h1>{{item.title}}</h1>
<p>{{item.description}}</p>
</ion-slide>
</ion-slides>
Looks like you need to wrap your long content in a <scroll-content> inside of each <ion-slide>, for example:
<ion-slides>
<ion-slide *ngFor="#item of items">
<scroll-content>
<h1>{{item.title}}</h1>
<p>{{item.description}}</p>
</scroll-content>
</ion-slide>
</ion-slides>
Note, you may need to do a text-align:left if you want the text to not be centered, since thats the default for content in <ion-slide>.
Setting style='height:auto' as stated in booyoungxu's answer disables sliding after you swipe on the first slide. style='overflow:scroll' works best.
<ion-slides style="height: auto">
...
</ion-slides>
In controller, put:
ngAfterViewInit() {
this.slides.autoHeight = true;
}