Ionic2 show multiple slides. Or part of it

Question

Im working with ionic2 and i wanted to use a slider for cards in my project. All the cards have images. Although ion-slides is pretty good i can´t make it work like i wanted to. I wish i could fit more than one slide in the screen at a time or part of the others at least. Like this:

So a part of the next and the last cards would be apparent. Does anyone know how to do that?

right now i have this:

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

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {
  public extraOptions;

  constructor(public navCtrl: NavController) {
    this.extraOptions = {
      slidesPerView: 3
    }  
  }

}

page-page1 {
    overflow:hidden;
}

ion-content {
    overflow: hidden;
}

ion-slides {
    //height: 70%;
    //width: 30%;
}

ion-slide {
    //width: 50px;
}

ion-card {
  background-color: #652345;
}

img{
  //margin: 5%;
  //max-width: 90%;
}

.card1 {
    background-color: mediumseagreen;
}

.card2 {
    background-color: cornflowerblue;
}

.questionblock {
    background-color: transparent;
}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

 <ion-slides effect="sides" initialSlide=1 pager = true slidesPerView=2> 
    <ion-slide>
        <ion-card class="card1">
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Cuidador de Mascotas</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

    <ion-slide class="questionblock">
        <ion-card class="questionblock">
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Quesstion
                </ion-card-title>
                <p>where is the love...</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

    <ion-slide>
        <ion-card class="card2">
            <img class="img" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Ninera con experienc...</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

  </ion-slides>

  <button ion-button>Button</button>
</ion-content>

Answer 1

Update Ionic 2.0.0

slidesPerView is now added to the input of ion-slides. So we can directly include it in the html itself as below

<ion-slides pager loop slidesPerView="3">
   <ion-slide>
    ...
    </ion-slide>
</ion-slides>

Ionic RC.5

Due to some changes in RC5, ion-slides are not working properly. You can try to set the slide options using variable. Replace ion-slides in your html with below code

 <ion-slides #slider> 
   ...
 </ion-slides>

Use the variable to set the slide attribute in your ts file

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

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class page1Page {

  @ViewChild(Slides) slider: Slides;
  constructor(public navCtrl: NavController) {

  }
  ngAfterViewInit(){
    this.slider.slidesPerView = 3;
    this.slider.pager = true;
  }
}

For further details refer https://github.com/driftyco/ionic/issues/9988#issuecomment-272473892.