When using ion-slides in Ionic 3, everything functions correctly on Android and iOS apps; I am able to swipe each row individually while the others remain stationary.
However, when attempting to "swipe" using the mouse on a browser, the expected behavior does not occur. If I swipe the first row, it causes the slides in the second and third rows to also change position.
Below is my template:
<ion-card *ngFor="let channel of channels; let i = index;">
<ion-card-header {{channel.title}}</ion-card-header>
<ion-card-content>
<ion-slides slidesPerView=4 spaceBetween="5">
<ion-slide *ngFor="let video of channels[i].playlist">
<img src="https://.../thumbs/{{video.mediaid}}"/>
</ion-slide>
</ion-slides>
</ion-card-content>
</ion-card>
What could be causing this issue?
I have also attempted to use the next and prev buttons, but I am struggling to find a way to configure the swiper options (as Slides input options were removed in Ionic 3.0.0).
How should I go about initializing the slider?
According to Swiper documentation, I need to set:
{ ...,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
...
}