Ionic3 slider flip effect not working - ionic-framework

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>

Related

How can i trigger slideNext in Ionic 4

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))

Show pager dots on ion-slide-box

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>

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>

Ionic grid trouble

<ion-grid>
<ion-row wrap style="background-color: #25dfc3">
<ion-col>
<ion-slides 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-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col>Amethyst!</ion-col>
</ion-row>
</ion-grid>
Is there any way to make my first row bigger than the second? I've been watching many tutorials but it seems that the flexbox solutions doesn't help me.

Actually you can just add a height in the first row.
<ion-grid>
<ion-row wrap style="background-color: #25dfc3; height: 300px;">
<ion-col>
<ion-slides 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-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col>Amethyst!</ion-col>
</ion-row>
</ion-grid>
View it here:
https://stackblitz.com/edit/ionic-rhdvzq

i have solved the issue with flex like so:
<ion-grid>
<ion-row class="top">
<ion-col>
<ion-slides pager>
<ion-slide>
<div class="sprite">
</div>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col col-1></ion-col>
<ion-col col-10>
<button ion-button block (click)="login()" >Inicia sesión con Facebook</button>
<p></p>
<button ion-button block color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
<p></p>
Términos y condiciones
</ion-col>
<ion-col col-1></ion-col>
</ion-row>
</ion-grid>
login-tutorial{
.top {
flex: 4;
background-color: #e8343b;
}
.button-block{
margin-top: 14px;
}
a {
text-align: center;
font-size: .7em;
float: left;
margin-left: 30%;
margin-top: 18%;
}
h1 {
color: #fbb034;
}
.swiper-pagination-bullet-active {
background: #fbb034;
opacity: 1;
}
.sprite {
width: 47.25px;
height: 51px;
/*margin-left: 42%;*/
margin: auto;
background-image: url("../../assets/imgs/babyL.png");
animation: luigui 1s steps(11, end) infinite;
}
#keyframes luigui {
from {
background-position: 0px;
}
to{
background-position: -549.25px;
}
}
}
screenshot 1
Then I copied the same code to another app, however, the result is different. It seem like the flex is not working...
screenshot 2

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;
}
}