react-multi-carousel
react-multi-carousel copied to clipboard
YIZHUANG
partialVisible - previousSlide
PartialVisible can only display the next slide. But I have a requirement to display the partial slide of previous too. If I use the center mode, it's auto-adjusting the widths of the cards. Is there any way to get the previous slide too with the partialVisible? What's the reason for ignoring this?
@YIZHUANG
It can be done with centerMode. partialVisible is only designed to show part of the next slide while centerMode is designed to show parts of both the previous and next slides.
e.g. https://codesandbox.io/s/vigorous-proskuriakova-6ipf0?file=/src/App.js
@OscarBarrett is it true that partialVisibilityGutter does not work with centerMode=true ?
If this is so then how can I define how much of the next / prev item is supposed to show on the left or right hand side without doing additional custom css work?
Correct, partialVisibilityGutter only applies when using partialVisible.
centerMode currently works by decreasing the slide width to fit half of a slide on either side of the Carousel. It increases the slidesToShow when calculating the itemWidth by 1 and increases the transform value by half the itemWidth.
It should be possible to add a new prop to allow for control of how much is displayed (e.g. centerGutter), and a PR would be welcome.
@OscarBarrett I will check into this and let you know what I find out. If I end up adding the functionality I will definitely PR
I can't avoid showing previous and next slides, even with centerMode and partialVisibility set to false, anyone has acomplished this ?
I can't avoid showing previous and next slides, even with centerMode and partialVisibility set to false, anyone has acomplished this ?
I am also having this issue.
@OscarBarrett
It can be done with centerMode. partialVisible is only designed to show part of the next slide while centerMode is designed to show parts of both the previous and next slides.
e.g. https://codesandbox.io/s/vigorous-proskuriakova-6ipf0?file=/src/App.js
This doesn't work as it is not centered:
