CODEWITHSUNDEEP
javascripthtmltypescriptionic2ionic3
Ali Abdulaal
Ali Abdulaal

Reputation: 175

Ionic 2 / 3 - How to view 2 slides when screen is wide?

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 ?

view 2 slides in wide screens

Upvotes: 2

Views: 2088

Answers (2)

Ali Abdulaal
Ali Abdulaal

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

Vayrex
Vayrex

Reputation: 1467

You must do it programmatically. And it is better to do for all cases:

  • resize
  • orientationchange

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

Related Questions