Slides - show a bit of the next slide

Is there a way to show multiple slides at once while showing a portion of the next slide?
slidesPerView=“2” shows 2 slides but no hint that there is a another slide, other than using the pager.
I tried 2.5 on a wild chance but no luck.

Hey, perhaps try enabling Auto Slides Per View - this should allow you to control the slide width using CSS and show a hint of the other slides if you wanted to.

Hey, that didn’t quite work for me but this did:

<ion-slides pager spaceBetween="40" slidesPerView="2">

ion-slide {
    width: 40%!important;

So thanks Dan for pointing me in the right direction.


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.


awesome solution … worked for me

spaceBetween =“2.5” worked to me

1 Like

Heey! Great… It works. Thanks, man. :slight_smile:

For those who struggle with the navigation of overlapping slides when spaceBetween is used. The solution is increasing the z-index of prev and next slides. So that, overlapped slides could be clickable.

Do not know if it works in older versions but on Ionic 5 you can use decimals in “slidesPerView”:

slideOpts = {
    initialSlide: 0,
    slidesPerView: 1.1,
    spaceBetween: 2.5

I have written the post for slider in Ionic 3