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?
Related
I am using ionic slider to display 3 cards where each card takes around 90% of the screen width (so that the next one is visible slightly)
Here's how it looks
<ion-slides [options]="{ slidesPerView: 'auto'}">
<ion-slide>
test 1
</ion-slide>
<ion-slide>
test 2
</ion-slide>
<ion-slide>
test 3
</ion-slide>
</ion-slides>
The problem is that when I start dragging the slide and when I release it, it does not stay where I left it (e.g. between the slides), but moves the focus to the image which occupies the most of the screen. It is "sticky".
What I'd like to achieve is that whenever I grab the slide, it stays where it is when released, rather than moving left or right.
For example, I need it to stay like this, if the user left it:
Desired look
How can this be achieved?
Thank you!
But that's how ion-slides work, it tries to imitate the behavior of the native PagerView (in the case of android).
What you want is a simple horizontal scrollable area. You don't need ionic for that, it can be easily achieved using only web technology (css):
<style>
.slider {
display: -webkit-box;
overflow-x: scroll;
}
.slider .slider-item {
width: 90%;
margin-right: 20px;
}
</style>
<div class="slider">
<div class="slider-item">...</div>
<div class="slider-item">...</div>
<div class="slider-item">...</div>
</div>
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/
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 have a page which contains ion-slides with loop enabled. Each slide is generated with *ngFor and each one contains a checkbox. The problem I am facing is that the checkbox is not getting checked on first and last slides. I have found that its because there are duplicate slides for the first slide and last slide so clicking on the checkbox is not triggering it since there are duplicates for the same. I have tried giving Id to checkbox to make it unique but since the slides are generated dynamically whatever change I give is also getting replicated. Is there any workaround for this? Any help is much appreciated.
Thank you
Here is my code
HTML part
<ion-slides pager='true' loop="true">
<ion-slide *ngFor="let slide of demoData">
<ion-card>
<ion-card-header>{{slide}}</ion-card-header>
<ion-card-content>
<ion-checkbox></ion-checkbox>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
Ts Part
demoData = ['1', '2', '3'];
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>