Create Animated card slider with Tailwind CSS and Swiper | React.js

Learn to create Animated Interactive card swiper using React, Vite, Tailwind CSS. Instead of using framer motion like usual, we use the swiper library which is more suited for this project.
Constants: gist.github.com/Mif2006/dca84...
Assets: drive.google.com/drive/folder...
Source Code: gist.github.com/Mif2006/b6963...

[@furkancakmak2206]

bro you are just amazing, appreciated, thank you🙏

[@dovpelesgmail]

thanks,you are the man

[@a.i.shanto2679]

thanks man,

[@wizard9910]

Thanks for the great video.🙏 Please also add navigation arrow to the source folder and share the link, if possible.

[@WebChainDev]

If you mean the arrow at the bottom left of the cards, I'm currently using the arrow from the react-icons library which is not stored in the src folder. Would you like me to use a normal image instead?

[@wizard9910]

I mean the navigation arrow which is present in left and right side of the container.

[@Taratatante]

​@@wizard9910 You can try to add the following in you Swiper component : navigation={true} modules={[Pagination,Navigation]}

[@techgeektw]

will this work in NextJS as well? and what if we want to auto move it by it self?

[@WebChainDev]

Yes it does work in Next.js. For it to move by itself you need to import the Autoplay module and add it to the other modules. Also in Swiper add autoplay={{ delay:0 }} loop={true} speed={5000} You can change these values to your preference.

[@felipeandreas3224]

Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function why?

[@demidzigua4217]

tx u help me ))

[@muhammadabduhsiregar9190]

its can be autoslide for setting time like 5 seconds?

[@WebChainDev]

Yes, you can do it by adding these attributes to the Slider: loop={true} autoplay={{ delay: 0, disableOnInteraction: false, }} speed={5000} and making the modules: modules={[FreeMode, Pagination, Autoplay]}. An example of this can be found in this project github.com/Mif2006/WebPortfolio/blob/main/app/my-skills/page.tsx

[@muhammadabduhsiregar9190]

@@WebChainDevaaah i see, thank you, love you're work!

[@shireenkhan7569]

For some reason my images are not loading, do they have any particular size?

[@WebChainDev]

You can add the classes w-full h-full to the div with the background image. That might help

[@AnupDDas]

source code?

[@WebChainDev]

Here it is: gist.github.com/Mif2006/b6963b16274c973b7ddfacf3106bb114

[@Minu_Shalom]

Thanks ? Where is it ?

[@WebChainDev]

The code for this component is in the GitHub gist in the description and my previous comment. There are also links to the constants and assets in the description.

[@Minu_Shalom]

@@WebChainDev You misunderstood :) I responded to this: 'source code?' I simply can't understand why people are so reluctant to say 'thank you' when somone obviously put a lot of work into the video and are sharing source code for free. Perhaps the least they could do is say 'thank you'.

[@WebChainDev]

Ahh, thanks for clarifying :) Thanks for the support!@@Minu_Shalom