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

hello and in this video you'll learn how to make this fully interactive and mobile responsive component without further Ado let's begin all right so here we have our basic V app the first thing we can do is as always go to our source folder and then into components in here we can create a new active slider. jsx file and in here run our AFC as always if you can't do that you can go to extensions and install this extension next thing we can do is go back to our file and folder structure go into app.jsx and import the active slider next we'll make our Imports and installations for that we can go to view and terminal and in here run mpm install swiper for the swiper component and animation and also we'll need to install some logos which will be react Das icons once that is done you can run mpm runev to run the app and straight away open it by going to Local Host 5173 next we need to go back and close the terminal and make all the Imports first of all we need to import swiper and Swiper slide this will be coming from swiper SL react next we want to import swiper SL CSS next import swiper SL CSS pagination and import swiper SL CSS slf free- mode also we want to import free mode and pagination which will be coming from swiper SL modules also want to import RX Arrow top right which will be coming from react D ions slrx and these are actually all the Imports for now and now we can move on into our jsx no JavaScript in this project so we can give it class name to the main div of flex items Das Center justify Das Center flex-all h-c screen and BG Das # 6 c34 AF don't forget to put a comma here and we can continue we can say free mode equals true pagination of clickable true next we can add the modules which will be an array of free mode and pagination also we can add a final class name of Max dw- 90% of the screen and on large devices this will be Max dw- 80% of the screen now as we'll have six cards in this video it'll be much better to create an array separately with all the data and simply map through it in this component for this we can go into our source folder and create a constants folder in here you can create an index.js and paste this in it I'll link this in the description down below what this is is essentially some imports of icons some images and some titles with text that is all so simply an array with some objects so now we can go back into our app and map through it we can go inside of our swiper and say service data which will import from constants do map take each separate item and make an instant return and this will return a swiper slide as this is a map each item needs its own key so we can say the key equals item. title and here we'll have a div with quite a lot of class names so let's make them all first of all flex flex-all and GAP -6 next we need to group everything together say relative Shadow dlg text- white rounded Das Exel padding X-6 padding y-8 h- 250 pixels a width of 215 pixels on large devices this will be a height of 400 pixels and also on large devices this will be a width of 350 pixels now if you go back to the app and look you can actually see the slider and these small cards inside of it so everything is working next we can make the background image so we can say div class name absolute inset d0 BG Das cover and BG Das Center also we can say Style say background image template string URL and item do background image so now we can go back make this a self-closing div add another self-closing div and give it a class name of absolute inser -0 BG Das black opacity -10 group- hover and opacity -50 this will be the shadow background so as you can see this works perfectly also while we're here we can add a cursor Das pointer to the main div so it works like this so now we can finally add the text and the icons under here we can say div give it a class name of a relative flex flex-all and GAP D3 next we can go under here and add a self-closing DI of item. Icon this will have a class name of text- blue- 600 group- hover text- blue- 400 w-32 pixels and H d32 pixels under here we can have an H1 which will have a class name of text- excl and LG text- 2XL this will have item. title also under here we can have a P tag which will have a class name of LG text- 18 pixels this will render the item do content if we look back what we'll see is almost everything is ready the title the text and the icon are there and the scrolling functionality is working perfectly next we can actually go under this div and say RX Arrow top right and give it a class name of absolute bottom-5 and left -5 w- 35 pixels and h-35 pixels text- white group- hover text- blue- 500 and also on group- Hover we can rotate - 45° and give it a duration of 100 now if we look at this as you can see we have these arrows everywhere and when we hover they turn blue and turn to the right just as we intended now we can make some small tweaks first all we can go over here into this wrapper div and add a margin bottom of 20 and also add a title and description to the top of the page so as you can see these circles move down by the way they are clickable and we are done with the app thank you for watching if you enjoyed the video please like And subscribe thank you

Channel: WebChain Dev

Views: 18,170

Keywords: react, react js, tailwind css, framer-motion, swiper, image slider, card slider, image swiper, card swiper, web dev, web development, webchaindev, animation, front end, react channel, card, animated card, css tricks

Id: kqlZkDxKLnM

Length: 9min 30sec (570 seconds)

Published: Thu Oct 05 2023