Show part of next slides in ionic2/swiper slider

Question

I am using Ionic2 slider which is using the Swiper under the hood. I have built a carousel that shows 3 at a time but I would like the fourth slide to show partly so the user knows there is more slides (can't use pagination dots). I can't see any configuration (either on Ionic API or Swiper API) to achieve. Is anyone aware of a configuration or a "non-hacky" way of achieving this. I have attached screenshot of what the design is suppose to look.

Could you create a simple plunker with the code, so we can take a look at it? — sebaferreras

Rico Leuthold Rico Leuthold · Accepted Answer · 2016-09-09T10:52:18

Try something like this in the template ...

<ion-slides [options]="sliderOptions"> ... <

And in your .ts class ...

export class ClassWithSlider {

  // slider options
  sliderOptions = {
    slidesPerView:4,
    centeredSlides:true
  };

}

The reference for the options can be found here, in section Swiper Parameters.

Show part of next slides in ionic2/swiper slider

1 Answers