Carousel
lastmod 2022-12-20created 2022-12-202 edits
Sliding images.
Implementing it yourself
Implementing it yourself is not as hard as you might think.
Create a single Container to hold all the slide contents and hide everything with overflow: hidden.
Then the slide contents will be hidden inside the Container, right?
Now, through logic, when a specific button is pressed, add a negative value to the content's margin-left to pull it by the distance to move!
To go the opposite direction, just add the pull distance to the margin-left value, right?
Implement it with this logic.
Another approach
You can also use the transform property instead of margin!
Implementing it by pushing the whole content by 30% at a time, like transform : translateX(-30%), gives the same effect as margin, right?
But if you use only this method, it will move in a stiff, choppy way. And slides are supposed to move smoothly..
So give it a transition property so that it moves smoothly when the margin value changes!
React Libraries
- React-Slick - The documentation is clean and it can give a typical slide feel. Since the documentation is so well organized, it has the advantage of letting you see many examples
- React-Material-Ui-Carousel - Works well with material-ui and has the advantage of letting you change detailed settings such as the slide transition animation and arrow settings.
- React Responsive Carousel - Provides responsive slides. This library seems to support only image carousels! I haven't been able to use it, but I added it because its download count on npm is overwhelming.