Allow for disableBottomSwipe (and others) to be functions

It would be useful to allow for disableBottomSwipe and the other similar props to be booleans or functions that return a boolean, to allow clients to enable or disable swipe directions per-card.

It might look something like:

<Swiper
    cards={ [ /* ... */ ] }
    disableTopSwipe={
        card => card.canSwipeUp
    } />

[webraptor]

<Swiper
            ref={swiper => {
              this.swiper = swiper
            }}
            renderCard={this.renderCard}
            cards={cards}
            cardIndex={cardIndex}
            disableBottomSwipe={cards[cardIndex].bottomDisabled}
            stackSize= {3}>
</Swiper>

How does your state management look like? Unless your cardIndex changes, it will always be 0 for instance. So no matter how many times you swipe, cards[cardIndex].bottomDisabled will be cards[0].bottomDisabled, which is disabled. As you swipe the swiper keeps track of your index internally and renders the proper cards, but since cardIndex isn’t updated within the parent component, it will stay to what you initialise the state with (probably 0), resulting in your error.

[webraptor]

const {cards , cardIndex } = this.state; // or this.props, whatever you got going on
// [... extra code, in render() lets say]
<Swiper
  disableBottomSwipe={cards[cardIndex].bottomDisabled}
  cards={cards}
  cardIndex={cardIndex}
/>

PS: didn’t put all props for the Swiper. bottomDisabled is a bool prop within the card object part of the cards array passed onto the Swiper… If it’s missing it automatically goes to false.