search

reactrondev / react-native-web-swiper

Swiper-Slider for React-Native and React-Native-Web
213 stars 55 forks source link

Multiple elements #69

Closed hirbod closed 2 years ago

hirbod commented 3 years ago

Hi, is it possible to show like 3 elements at a time and center the "selected" one with this library?

oxyii commented 3 years ago

@Hirbod I was doing something similar in one project. it seems that it is impossible without changes in this lib. It is impossible to change the behavior of this lib from the outside at here:

https://github.com/reactrondev/react-native-web-swiper/blob/f2b5d4021410e88cf805f11726052a1eeacbc02a/src/Swiper.js#L159-L169

if your swiper is horizontal, you need to make such a change at row 162:

this._animatedValueX = vertical ? 0 : width * activeIndex * (I18nManager.isRTL ? 1 : -1) + YOUR_MARGIN;

Also you must set margins to containers:

<Swiper
  containerStyle={{ marginHorizontal: YOUR_MARGIN }}
  innerContainerStyle={{ marginHorizontal: YOUR_MARGIN * -1 }}
>
  {/* your slides */}
</Swiper>

I found my very old implementation. You can take it from gist if it helps. But keep in mind: this implementation has a different set of props. Something like defined in this readme

hirbod commented 3 years ago

Thank you very much. Will have a look at it and try to see if it fits my needs. Currently pretty hard to find a feature packed swiper like those for the web for react native web.

jarvisluong commented 2 years ago

Hi! This issue seems to be inactive, hence I will close. If you still face issue and need help, please re-open this issue.