Slides - show a bit of the next slide

Ionic Framework ionic-v3
#1

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.

#2

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.

#3

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

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

ion-slide {
    width: 40%!important;
}

So thanks Dan for pointing me in the right direction.

6 Likes
#4

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.

4 Likes
#5

awesome solution … worked for me

#6

spaceBetween =“2.5” worked to me

1 Like
#7

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

#8

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.

#9

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

I have written the post for slider in Ionic 3