search

Learus / react-material-ui-carousel

A Generic carousel UI component for React using Material UI.
MIT License
549 stars 219 forks source link

Vertical version of carousel #131

Open LizzyRandall opened 2 years ago

LizzyRandall commented 2 years ago

Great library! I attempted to convert the carousel to be vertical with no luck. The problem with the css is the navButtonsWrapperProps applies to both previous and next wrappers. I tried various combinations to attempt to override the top: "calc(50% - 20px) !important" for css because I'd want next to be at the bottom and previous to be at the top rather than left/right. I tried various combinations with navButtonWrapperProps and NavButton properties but that didn't get anywhere. If there was a way to override the css for previous and next wrappers specifically I think it would make it more possible.

I also tried using styled on Carousel to reference the previous and next wrappers specifically but that doesn't affect it. I looked at the source code and I would think this would work.

const VerticalCarousel = styled(Carousel)(() => ({ next: { display: "flex", justifyContent: "center", alignItems: "center", position: "sticky", }, prev: { display: "flex", justifyContent: "center", top: 0, left: "calc(50% - 20px)", alignItems: "center", }, }));

I also realized while digging into the source swiping wouldn't work since it only goes left to right, which makes sense. Anyway, it would be nice if there was a vertical version possible.

Learus commented 2 years ago

Hi there. This is surely an interesting concept I have never thought about.

It is not in my current plan to implement such a future. At least not in the very near future. I will have it in mind for a big update in the future though.

Stay tuned!

LizzyRandall commented 2 years ago

Thanks! I opted for a list of cards instead to get the job done. I think the nice benefit of a carousel is you don't have to deal with trying to hide a scrollbar, it could make it just look cleaner in that way.