CODEWITHSUNDEEP
ionic-frameworkionic5
Tomasz Ozga
Tomasz Ozga

Reputation: 45

How to add slide up/down behaviour for cards in Ionic 5

Hey I'm looking for a while but I can't find anywhere on how to make it possible to swipe cards up and down to show options.

I want to combine the ion-slides, where by moving left to right you can browse trought the cards (that works well) with an option to slide the card up or down for options (behavior similar to ion-item-sliding, but instead of horizontal in the vertical axe). Any idea?

Upvotes: 0

Views: 846

Answers (1)

DanielMescoloto
DanielMescoloto

Reputation: 180

Ionic uses the swiperjs to manage the ion-slides. https://swiperjs.com/api/ You can pass the parameter 'direction' to 'vertical', default is 'horizontal'

an example: https://swiperjs.com/demos/#vertical_slider for what you're asking for

another example that you can make nested: https://swiperjs.com/demos/#nested_swipers

you can swipe left/right and on the second slide, you can swipe up/down

in ionic:

<ion-slides [options]="{'direction': 'vertical'}">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
</ion-slides>

Upvotes: 1

Related Questions