Is it possible to select a slide to display with a focus on as the initial one? I have an array of items to display in Ionic slides, and I want to "preselect" (= put focus on the slide) based on preferences but keep the order.
I have read the Ionic documentation, but I am probably missing something. So far it looks I would need to use the slideTo function in the constructor of the page, but I was looking for a directive to use directly in the html template.
Thank you for any info.
.html
<ion-slides pager="true" [options]="slideOpts">
<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>
.ts
slideOpts = {
initialSlide: 2,
speed: 400
};
all the options are here http://idangero.us/swiper/api/
Related
I'm trying to add a fullscreen view but the notch area gets a white bar
page.html
<ion-content>
<ion-slides>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
</ion-slides>
</ion-content>
how do I extend the background image to the notch area?
Add preference for staus bar
<preference name="StatusBarStyle" value="color" />
I am using ion-Slides to show the selected image from the gallery and swipe them horizontally and it is working good but I want to show the last selected image on the screen.
I tried using slideTo() and it causing the type error.
For more clarity: I am running a loop where I push selected images from gallery in with base64 conversion into an array and pass it in an image tag to show images on the HTML screen.
any help would be great.
#ViewChild('slides', { static: false }) slider: IonSlides;
I faced a similar problem.
Had to change static from true to false.
You can use ionSlidesDidLoad event to make sure ion-slide has loaded.
subscribe for the event in your html file like following sample:
<ion-content>
<ion-slides (ionSlidesDidLoad)="slidesLoaded($event)">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
</ion-content>
and in your ts file add the following method:
public slidesLoaded($event) {
//move to slide number 2
$event.target.slideTo(2);
}
This event is available in Ionic 4 and later.
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
I have a state called deployment
It's html looks like this:
<ion-slide-box>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
Now, when I use $state.go('deployment'', {}, {reload:true}), it navigates to second slide of deployment state.
I tried using active-slide directive and setting it before using state.go but it did not help.
How do i navigate to the first slide?
I am using ionic Slide box and I want to disable for a user to slide between content horizontally using $ionicSlideBoxDelegate.enableSlide(false);
but this means i cant scroll vertically with the content. How do I work around this.
Use ion-content scroll == true inside ion-slide
<ion-slide-box show-pager="false" on-slide-changed="yourfunction()" does-continue="false" auto-play="false" slide-interval="100" >
<ion-slide>
<ion-content scroll="true">
your first slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your second slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your third slide
</ion-content>
</ion-slide>
</ion-slide-box>