Ionic 2 - Slider - show part of second slide item

Question

I want to show part of the second slide item, but don't know how to do it. This is what I have so far (basic Ionic slides):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>

and this is how I want it to be:

I've tried to change the width of the ion-slide to less than 100%, but the second and third slides just gets moved further to left, out of the screen.

Can anyone help me ?

Answer 1

Edit:- For Ionic 5 Set the Options in the TS file.

slideOpts = {
  slidesPerView: 1.5,
  spaceBetween: 10 
};

For Ionic 3

I think you get it. This solution for the others who are still searching for this view. Just add this to the ion-slides tag.

slidesPerView="1.5" spaceBetween="10"