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>
Related
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();
}
}
EDIT: adding a stackblitz:
https://stackblitz.com/edit/ionic-b2r7si
I am using ion-slides as following:
<ion-slides class="fullWidth" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="change($event)">
<ion-slide #status *ngFor="let array of arrays">
<ion-col>
{{array}}
</ion-col>
</ion-slide>
</ion-slides>
I need to change the css style of the current active slide, like make it underlined or bold. I've done some researches and apparently I should use [ngClass]='' but can't know how.
I am getting the index of the active slides using:
change(e) {
this.slides.getActiveIndex().then(
(index) => {
this.currentIndex = index;
console.log(this.currentIndex);
}
)
}
I tried:
<ion-slide #status *ngFor="let array of arrays;let i=index;">
<ion-col [ngClass]="{'activeIndex': currentIndex==array[i]}">
{{array}}
</ion-col>
</ion-slide>
And activeIndex style:
.activeIndex{
font-size: 1.5em;
}
But only one element of the array is changed of style.
Set the activeIndex class to currentIndex === i. If you set it to array[i], you will get letters of the array instead of the index number you are looking for.
<ion-col [ngClass]="{'activeIndex': currentIndex === i}">
{{ array }}
</ion-col>
Working stackblitz
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);
}
}
https://i.stack.imgur.com/NnhMY.png
https://i.stack.imgur.com/NIYZm.png
I took this from a site and I'm trying to have one like this only on the right side of my page. In my page i have a header,footer and in the content area i have this ion slide box where the images will be sliding one after the other. so i want a right carousel like in the second image link..
According to the Ionic Docs you can. The ion-slide-boxelement comes with the $ionicSlideBoxDelegate service that provides helper methods to control the slides.One of these helper functions on the service is next(). this allows you to go to next slide on a button click event.All you need to do is position your button as required and use the code as below(slightly modified from documentation).
USAGE:
//Your view
<ion-view>
<ion-slide-box>
<ion-slide>
<div class="box blue">
Slide 1
</div>
</ion-slide>
<ion-slide>
<div class="box red">
Slide 2!
</div>
</ion-slide>
</ion-slide-box>
//Your button
<button ng-click="nextSlide()" class = "button-icon ion-chevron-right"></button>
</ion-view>
//In your controller
function MyCtrl($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
}