ion-slides with smooth scrolling and no snapping

Question

I'd like to use the <ion-slides> component to create a album thumbnail scroller like on the Spotify mobile app. I have mostly got it working but I want to be able to disable the snapping. Is this possible?

<ion-slides centeredSlides="false" slidesPerView="2.5" spaceBetween="-16">
  <ion-slide padding *ngFor="let album of albums">
    <ion-card>
      <img [src]="album.image">
      <ion-item>
        <h3 ion-text text-center>{{ album.title }}</h3>
        <p ion-text text-center>{{ album.artist }}</p>
      </ion-item>
    </ion-card>
  </ion-slide>
</ion-slides>

I thought there might just be an input setting for the component that disables the snapping but I cannot find anything like this in the docs.

@juliusbangert have you perhaps solved this? I am trying to do the same thing :) — phunder, Feb 26 '19 at 11:35

score 2 · Accepted Answer · answered Nov 21 '20 at 09:48

2

As detailed by Swiper.js in your slider options add the following. See example here https://swiperjs.com/demos/150-freemode.html

freeMode: true,

answered Nov 21 '20 at 09:48

Tafadzwa Tazvitadza

36
2

score 0 · Answer 2 · answered Feb 26 '19 at 13:06

I have had the same problem today, and have come across the following article that seems to do what we re trying:

Ionic 4 | Multiple Slides on Single View Using Swiper Slider

I have yet to get it working, but will keep you updated if I do. Thought it might help you in the meantime.

ion-slides with smooth scrolling and no snapping

2 Answers2