Reputation: 175
I searched about something that allows me to view 1 ion-slide if the screen of device is small, else it should be 2 ion-slide but I couldn't find the solution
For example I used this code to view 1 slide and part of other slide
<ion-slides slidesPerView="1.125">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
And this other code allows me to view 2 slides
<ion-slides slidesPerView="2.125">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
My question is possible to make such as bellow image-example in ionic & How ?
Upvotes: 2
Views: 2088
Reputation: 175
After hard work and so many tests, I could find the best solution as I think..
Here is my solution
First of all I wrote a function that check the screen width and return 1.125 or 2.125
checkScreen(){
if(window.innerWidth>=960){
return 2.125;
}else{
return 1.125;
}
}
Then I made these few changes in the HTML
<ion-content (ionChange)="checkScreen()">
<ion-slides [slidesPerView]="checkScreen()">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
</ion-content>
Now the slides shows in different shapes dependent on screen size
Upvotes: 2
Reputation: 1467
You must do it programmatically. And it is better to do for all cases:
So you may have Device class, which will be able to check device type, using UA regex (maybe it is not needed but I have seen good example on github).
interface DeviceData {
widht:number;
type:any;
orientation:any;
}
class Device{
public onRezise = new EventEmitter();
public onOrientationChange = new EventEmitter();
constructor(){
//add listeners for resize and orientation change
}
public getWidth(){
}
public getOrientation(){
}
public getDeviceType(){
}
}
Then you can use data in your component, also listen to changes in window. And have dynamic number of slides.
class Component {
constructor(private _device:Device){
}
ngOnInit(){
this._device.onOrientationChange.subscribe((v:DeviceData) => this.setNumberOfSlides(v));
this._device.onRezise.subscribe((v:DeviceData) => this.setNumberOfSlides(v));
}
private setNumberOfSlides(data:DeviceData){
this._numberOfSlides = data.widht/slideWidth;
}
}
Upvotes: 1