Carousel nivagation
Hello everyone,
I am making a carousel in React and CSS for navigation with modals. When I click on the next button, I want to show the next modal by making the previous one goes out of the screen and the new one to come (I used transform: 'translateX...' property for that). I am using MUI component Modal to have the background blurred and to be able go back by just clicking outside of the modal. Then I am using MUI MobileStepper for progression bullets. I am struggling with making it all work together. Do you know how could I fix that? Thank you!
6 Replies
If I get you correctly, if you're data is coming as an array, you could use the index of the array to fix this by increment although, once it gets to the last array it'll break.
To fix the increment failure once it gets to the last index, you could write some conditions to check if the index equals the last it should return to the first index.
I'll drop some codes later.
Hey, @uliana3412 . Have you been able to fix this?
@uliana3412 Hey there! Its a bit hard to follow along with the screenshots you've shared but there's an example on MUI's docs that would appear to somewhat closely align with what you're seeking other than the modal part: https://mui.com/material-ui/react-stepper/#text-with-carousel-effect
One recommendation I have is to contain the controls of your slider inside of the white box (the actual modal container) because the general outside click listener will be listening for any click outside of the container, and those 2 buttons are outside of the container and you could potentially be triggering that function inadvertently.
React Stepper component - Material UI
Steppers convey progress through numbered steps. It provides a wizard-like workflow.
Thanks, Andrew for helping me note this. @uliana3412 I'm sorry about that too.
@Buggy Bug World it's ok! No problem at all!😉 @Andrew thanks for your answer! It is exactly what I had in my head. But with this setup, just as with my initial code, I don't know how to apply the animation to make one card go away and the next one to come. I used property but at the moment React updates the component, I was on the second slide, so it was the secod slide that was moved away and not the current one! This is why I used React-Slick for a carousel and MUI Modal for the blurred background. I didn't test it yet on the touchable screen. I need it to be swipeable. I think it is. I tried to use "React-swipeable" https://github.com/FormidableLabs/react-swipeable/blob/main/examples/app/SimpleCarousel/Carousel.tsx. I copied the repo but I don't know why when I am sliding back I have a margin at the right. I join you my final code with React Slick and the css of React Swipeable which is leaving me with the margin...
