Ionic slider: Allow cards not to be sticky

Question

I am using ionic slider to display 3 cards where each card takes around 90% of the screen width (so that the next one is visible slightly)

Here's how it looks

 <ion-slides [options]="{ slidesPerView: 'auto'}">
    <ion-slide>
        test 1
    </ion-slide>
    <ion-slide>
        test 2
    </ion-slide>
    <ion-slide>
        test 3
    </ion-slide>
</ion-slides>

The problem is that when I start dragging the slide and when I release it, it does not stay where I left it (e.g. between the slides), but moves the focus to the image which occupies the most of the screen. It is "sticky".

What I'd like to achieve is that whenever I grab the slide, it stays where it is when released, rather than moving left or right.

For example, I need it to stay like this, if the user left it: Desired look

How can this be achieved?

Thank you!

Answer 1

But that's how ion-slides work, it tries to imitate the behavior of the native PagerView (in the case of android).

What you want is a simple horizontal scrollable area. You don't need ionic for that, it can be easily achieved using only web technology (css):

<style>
.slider {
    display: -webkit-box;
    overflow-x: scroll;
}
.slider .slider-item {
    width: 90%;
    margin-right: 20px;
}
</style>

<div class="slider">
    <div class="slider-item">...</div>
    <div class="slider-item">...</div>
    <div class="slider-item">...</div>
</div>