I am using ion-slide in ionic4 and i want to go for next slide manually by clicking on button. I have seen the ion-slide documentation in which they have mention slideNext method. But I don't know how to use this method for changing slide.
Ya, I got the solution. In ionic 4 you have to import IonSlides instead of Slides.
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>
In Angular 8 :
#ViewChild('mySlider', { static: true }) slides: IonSlides;
Is simple and just necessary in 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>
Simple way (same as above answer but I tried to make it simpler):
import { Slides } from 'ionic-angular';
class abc {
#ViewChild(Slides)slides: Slides;
public next(){
this.slides.slideNext();
}
public prev(){
this.slides.slidePrev();
}
}
Related
I'm working in ionic v5. I want to slide images on pager dots click, but it is not working now.
My code is:
<ion-slides pager="true">
<ion-slide>
<p>Page1</p>
</ion-slide>
<ion-slide>
<p>Page2</p>
</ion-slide>
<ion-slide>
<p>Page3</p>
</ion-slide>
</ion-slides>
</ion-content>
By default they are not clickable but, as you can see in the Ionic docs you can set the options of the slider to change that:
options: Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
Component
import { Component } from "#angular/core";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage {
public items = ["Option 1", "Option 2", "Option 3"];
public sliderOptions = {
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true
}
};
}
Template
<ion-header>
<ion-toolbar>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>Welcome to Ionic!</h2>
<p>
Slider with clickable pager:
</p>
<ion-slides pager="true" [options]="sliderOptions">
<ion-slide *ngFor="let item of items">
<p>{{ item }}</p>
</ion-slide>
</ion-slides>
</ion-content>
Please take a look at this stackblitz demo.
I'm not able to get parallax effect to work with ionic4 ion-slider. I've tried examples from the original source code of idangero but none seem to work.
import { Component } from '#angular/core';
#Component({
selector: 'slides-example',
template: `
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<ion-img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></ion-img>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
`
})
export class SlideExample {
slideOpts = {
effect: 'flip', // <-- this does not work either
parallax: true
};
constructor() {}
}
I'm building a mobile app in ionic and I wanna make a slack-like side menu by placing slides.
For example, when you click on main menu item, it will slide out another slide in the sidemenu as slack does.
I tried to use ion-slides in ion-menu but slides is not working.
Check out the screenshot, please.
Here is the code snippet.
<ion-menu [content]="mycontent" [swipeEnabled]="false">
<ion-content>
<ion-slides>
<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-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
Here is what I'm trying to build.
Any thoughts on how to implement this?
Thanks.
The ion-slides component makes use of the Swiper library under the hood. Part of the init code for Swiper depends on knowing the width of the slide container, and the code uses clientWidth to get it. Since the menu starts out with display:none, the retrieved width is always zero and the init code bails on you.
You can get around this by temporarily setting display:block while Swiper initializes. I have my side menu inside of a component, so you may need to adjust this code to your situation:
app.html:
<sidebar [content]="content"></sidebar>
<ion-nav #content [root]="rootPage" swipeBackEnabled="false"></ion-nav>
sidebar.html:
<ion-menu [content]="content" swipeEnabled="false">
<ion-content>
<ion-slides pager>
<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>
</ion-content>
</ion-menu>
sidebar.component.ts:
...
#Component({
selector: 'sidebar',
templateUrl: 'sidebar.html',
})
export class SidebarComponent implements AfterViewInit {
#Input('content') content: NavController;
#ViewChild(Slides) slides: Slides;
#ViewChild(Menu, { read: ElementRef }) menuRef: ElementRef;
// Use Renderer2 instead of direct DOM manipulation through the
// ElementRef.nativeElement.
//
// #see: https://medium.com/#kmathy/angular-manipulate-properly-the-dom-with-renderer-16a756508cba
//
constructor(private renderer: Renderer2) {
}
// ViewChild template references might not be available until
// AfterViewInit lifecycle hook runs.
//
// #see: https://blog.angular-university.io/angular-viewchild/
//
ngAfterViewInit() {
this.renderer.setStyle(this.menuRef.nativeElement, 'display', 'block');
setTimeout(() => {
// Swiper init has its own ngAfterViewInit code that delays 300ms
// before running. Don't remove the 'display' style until after that.
this.renderer.removeStyle(this.menuRef.nativeElement, 'display');
}, 310);
}
}
I have 2 pages, login and home, when the user successfully logins, it will be directed to the home page and I set this as the root page. I've confirmed this by using navCtrl.canGoBackFunction and it is false. I tried adding a Menu Toggle but when I pressed the toggle button the menu does not show up
This is my home.html
<ion-header>
<ion-navbar color="primary">
<button menuToogle ion-button icon-only class="menu-button-left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
<button ion-button class="menu-button-right" (click)="logout()">
<p>Logout</p>
</button>
</ion-navbar>
</ion-header>
<ion-content padding-left padding-right>
</ion-content>
my home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private authService: AuthService
) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
console.log(localStorage.getItem('token'));
}
logout(){
console.log('logout button clicked');
this.authService.logOut();
this.navCtrl.setRoot(LoginPage);
this.navCtrl.popToRoot();
}
}
my app.html
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I've re-read multiple times the manual and I didn't see any issues with the way I did, the manual says it I put it in navbar the page should be root. I also tried using a toolbar but again clicking the menu toggle button does not do anything. Any idea ?
Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack. To make a menu persistent set persistent to true on the element. Note that this will only affect the MenuToggle button in the Navbar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected. In your code you have to change like below code.
my app.html
<ion-menu [content]="mycontent" persistent="true">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
If I have 3 slides, when the view loads, I would like to see the slide number 3 first. Start by the end, not by the slide 1.
I tried:
ionViewDidLoad() {
this.slides.slideTo(3)
}
but it throws an error:
Cannot read property 'length' of undefined
There's currently an open issue related to this. As a temporary workaround, you could try by wrapping that line of code inside of a timeout, or use the ionViewDidEnter lifecycle hood:
ionViewDidEnter() {
this.slides.slideTo(3, 0); // The 0 will avoid the transition of the slides to be shown
}
or
ionViewDidLoad() {
setTimeout(() => {
this.slides.slideTo(3, 0); // The 0 will avoid the transition of the slides to be shown
}, 300)
}
There is an initialSlide input property [REF]https://ionicframework.com/docs/api/components/slides/Slides/#Input Properties
in the view you can just add
<ion-slides initialSlide="2">
<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>