Ionic 2 - Slider - show part of second slide item

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;
  }

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"

After wrestling with this issue, I found a pretty straightforward solution that seems to work.

<ion-slides spaceBetween="-18">

Obviously, adjust the number to match your specific needs.

In UX, it is better for the user to know if he has more items to see, especially when we don't intend to use a pager.

ion-slides use internally http://www.idangero.us/swiper/ may this help us to accomplish that.

We can use slidesPerView="2" spaceBetween="250"

You have to refine the spaceBetween value according to your item slide size.

Lastly, you need an empty ion-slide in the end, because spaceBetween make a little mess in the positioning.

.card {
    width: 300px;
}

<ion-slides slidesPerView="2" spaceBetween="250">
    <ion-slide *ngFor="let foo of bars">
        <my-item class="card"></my-item>
    </ion-slide>
    <ion-slide>
        <!-- need a empty slide to avoid last item to be inaccessible -->
    </ion-slide>
</ion-slides>