Create Amazing animated image Carousel with react and framer-motion | Beginner tutorial

In this video you will learn how to create an animated carousel with React.js, Tailwind CSS and framer motion.
The images I used: drive.google.com/drive/folder...
Source code:
gist.github.com/Mif2006/5ad7a...

[@moandoanh8370]

I love content like this, simple, concise and wonderful. Hope to see more in the future.

[@WebChainDev]

Thanks!

[@user-xz1tg6ce1j]

Very nice and very easy content. thanks

[@proyag7518]

alter the zindex a little cause it's overlapping center: { zIndex: 5 }, left1: { zIndex: 3 }, left: { zIndex: 2 }, right: { zIndex: 1}, right1: { zIndex: 3 }, nice Carousel by the way

[@WebChainDev]

Thanks for the advice!

[@KamleshwarPradhan]

Amazing content. I was trying to add more images but unable to do it, it will be better if you suggest how to generalize this for a large number of images. Thanks in advance ❤❤❤

[@WebChainDev]

@KamleshwarPradhan to add more images you need to do 5 things. First expand the positionIndexes array to a suitable number. Next change % 5 in handleNext to % positions.length. Next expand the images array. After that expand the positions array with your new positions. And finally add the new positions to the imageVariants. Here is a github gist with examples of components with 7 and 9 images: gist.github.com/Mif2006/cd6b54aba84ad86e92b470c28833ce24. Hope you found this helpful

[@essenc3189]

can you write the code for the prevButton as well ?

[@WebChainDev]

Here is the link to the component with the addition of the button: gist.github.com/Mif2006/5ad7a061259c32b89daf8098f2830b95

[@essenc3189]

10x you mate, it was quite good slider i was looking for. If you provide some other slider like this but with many images, without adding exact position numbers , would be nice.