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"

Answer 2

I had some good results setting the slidesPerView to 'auto' and giving each slide a margin-right of -18px and a margin-left of 18px (except for the first and last, of which either the margin-left and margin-right are set).

Here's the template code:

 <ion-slides [slidesPerView]="'auto'">
     <ion-slide *ngFor="...">
         ...
     </ion-slide>
 </ion-slides>

And here's the css:

  ion-slide {
    width: 240px !important;
    height: 290px !important;

    margin-right: -18px;
    margin-left: 18px
  }

  ion-slide:first-child {
    margin-left: 0;
  }

  ion-slide:last-child {
    margin-right: 0;
  }