Create animated image slider with Swiper and Tailwind CSS | React js

hello and in this video you'll learn how to create this awesome component which has an interactive image slider and a cool gradient hover effect without further Ado let's begin all right so here we have our basic V react app and as always let's begin by going into the source folder into the components folder and creating a new project slider. jsx in here you can run RFC to create a basic react component as always if you can't do that go to extensions and install this extension for react Snippets now let's make all the Imports and installations that you can go to view and terminal and in here run mpm install swiper and react Das icons next you can do npm run Dev to run your app on Local Host and now let's control click on the link to see the app we can can go back and close the terminal now let's make all the Imports first of all let's import swiper and Swiper slide from swiper next we can import swiper SL CSS import swiper SL CSS SL pagination also import SW wiper SL CSS SL pre- mode also import free mode and pagination only with a capital P which will be coming from swiper SL modules and finally we can import r x Arrow right which will be coming from react Das ions slrx next thing we can do is over here say swiper SL react I forgot to put that also you can go to app.jsx and say project slider over here now if we go to the app let's see if everything is working and yes the project slider is here now back over here we can remove this text and style is div first of all will have a height of screen Flex container flex-all on medium devic and bigger it will be fx- row with a gap of five also items Das sensor and justify Dash sensor it will have a background of # 331 854 inside of here we can create the rapid for the slider we have a class name of with 70% of the screen and also medium devices and higher a width of 40% all right so in here we can say the swiper and it will have some parameters first of all it will have some break points essentially different screen sizes in this case it will be essentially all the same so we can say slides per view of one and space between of 15 we can a comma here and duplicate this for 700 and continue first of all we can say free mode which will be true also we can say pagination equals clickable true modules an array of of free mode and pagination and that is all in here we can have a swiper slide this can have a class name of margin bottom of 14 inside here we can add a div which will be the grid so class name grid grid ds-2 Gap D4 and padding X of 10 now inside the div we can say purple images. map image make an instant return and make a div over here now purple images are coming from our constants so from constants and index.js so we have purple images and orange images I will have this in the description below so in here we can give this a class name of relative and group and give this a key of image do Source now in here we can add the image itself so we can say image give it a source which will obviously be image. Source an ALT of purple image a class name of rounded Das MD h- 240 pixels w- 240 pixels and object Das cover all right so under this image we can have a self closing div which will have a class name of cursor Das pointer absolute inset -0 BG D gradient to R from Das purple D800 via d pink d500 2- purple D800 and B- opacity d0 or simply opacity -0 be correct and group Dash hover will be opacity of 70 so under here we have another div which will have a class name of absolute inset d0 Flex items-- Center justify Dash Center cursor Dash pointer next opacity d0 group- hover opacity D100 and transition Dash all inside of here we can have some text of view project and under here we have an RX Arrow right which will have a class name of margin left D2 w- 24 pixels and height of 24 pixels Also let's add group- hover over here I made a small mistake and also text- white and let's look at the result this is working perfectly but all we have to do now is implement the second part of the slider now to do that we'll simply copy this swiper slide as second one will be almost identical the only thing we'll change is make this orange images next we make this 900 and 900 instead of pink we'll make it orange now if we go back the slider has appeared and as you can see this has different gradients it's all interactive and working perfectly we can add another small change over here in this div of Max dw- 240 pixels so it's always the right size and also rounded - MD can the same thing over here so max dw- 240 pixels and rounded Dash MD also at the top right below the main div we can add some text this simply a div with an H1 that contains span and a P tag nothing complicated if we go back over here as you can see everything is working perfectly the slider is moving we have different gradients on each part that are exactly the right size so yeah the project is finished if you enjoyed the video please like And subscribe thank you

Channel: WebChain Dev

Views: 3,106

Keywords: responsive design, anima app, css responsive design, responsive design tutorial, responsive web design, animation, css animation, tailwind css, react, react js, carousel, imaage carousel, react animation, framer motion, web dev, webchaindev, Interactive cards, Swiper, css

Id: E5M_3ayyjok

Length: 8min 56sec (536 seconds)

Published: Mon Oct 09 2023