Designing an adapative Ionic Slider in Ionic 3

In Ionic 3 by semeLeave a Comment

When we wrote what we learned about Designing complex layouts using ionic grid and breakpoint-sass for our Foodica Mobile/PWA template, one of the challenges we had was making sure the slider played nice at any size. At the time of foodica, we solved this by wrapping the slider in a column and decided how wide that column was at every grid breakpoint.

This is nice and all, but what if we wanted to take it up a notch? What if we wanted the ion-slide to change from just a slider on mobile to a carousel on tablet? That option really gives us more options on a design level that you wouldn’t normally expect, so this is what we’re gunning for:

Looks great right? Lets begin.

Start here

create a new ionic app.
run ionic start slide-adapt blank

Let’s add the following markup in our src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home Slider
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-slides>
  <ion-slide>
    <img src="http://placehold.it/300x300/ff0000/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/ffcc33/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/336699/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/33ccff/ffffff" alt="">
  </ion-slide>
</ion-slides>
</ion-content>

In the src/pages/home/home.scss, set the height of the ion-slide to auto:

page-home {
  ion-slides {
    height: auto;
  }
}

Run ionic serve. We should have the following image:

While straightforward, the problem arises when we change the view to tablet/desktop…

While we could use an ion-grid in our last tutorial, we want to convert this to a carousel on wider screens. We can do this because ion-slides has a lot of configurable options, one of which we can specify the number of slides visible at any time, the [slidesPerView] option, configurable as an input.

Let’s change our ion-slide to show this in action:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- Set the number of slides visisble at any time to 5 -->
<ion-slides [slidesPerView]="5">
  <ion-slide>
    <img src="http://placehold.it/300x300/ff0000/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/ffcc33/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/336699/ffffff" alt="">
  </ion-slide>
  <ion-slide>
    <img src="http://placehold.it/300x300/33ccff/ffffff" alt="">
  </ion-slide>
</ion-slides>
</ion-content>

As we’ve explicitly set the number of slides to 5,  it would look like this:

 

But we want to create a slider that programmatically decide the number of items based on device size. Let’s list how we’ll do this

  • Ge the screen width
  • Decide what to do based on screen width (slider, 3 items? 5 Items?)

We could use some vanilla javascript, or we can use Ionic’s Platform Class

Ionic Platform

Copied from the Ionic Docs, Ionic Platform is defined:

The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it’s on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.

For now, we just need the width() method of Ionic Platform. Edit our src/pages/home/home.ts to the following. I’ve numbered the comments.

import { Component } from '@angular/core';

// (1) - Importing our Platform Class for use
import { NavController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // (2) - Instantiating for use
  constructor(public navCtrl: NavController, public platform : Platform) {
    // (3) getting the width of the screen
    console.log('Screen Width is: ',this.platform.width());
  }

}

refresh your ionic serve, view under your console log, and we’ll see Ionic Platform has provided us the width. Another benefit is using this method is preferred since the dimension is a cached value, which reduces the chance of multiple and expensive DOM reads.

So now we have this width, what to do with it? We set the number of slides that should appear based on the width. We’ll create a variable we can attach to the slider.

Here’s the final code for the src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  slidesPerView : number = 1;
  constructor(public navCtrl: NavController, public platform : Platform) {

  }

  ionViewDidLoad(){
    console.log('Screen Width is: ',this.platform.width());

    // On a desktop, and is wider than 1200px
    if(this.platform.width() > 1200) {
      this.slidesPerView = 5;
    }

    // On a desktop, and is wider than 768px
    else if(this.platform.width() > 768) {
      this.slidesPerView = 4;
    }

    // On a desktop, and is wider than 400px
    else if(this.platform.width() > 400) {
      this.slidesPerView = 2;
    }

    // On a desktop, and is wider than 319px
    else if(this.platform.width() > 319) {
      this.slidesPerView = 1;
    }
  }

}

Refresh ionic serve and we should get the following: