Make a 3D Image Carousel with React Slick

[Music] hey everybody hope you're doing all right today we are going to use react slick a a library that helps us to create different carousel sliders and so for this one i'm going to show you all how to set up a slider that has this kind of 3d rotation effect where we have this infinite loop through images and you can use whatever you want for these images but to have this cool kind of like transition where it looks like it's kind of popping out at you so with that let's go ahead and get started i have a new project here um it's just a create react app that's pretty much all i've done and then uh i have also imported these uh these static assets so i just use a site called undraw i've used it before in previous videos and then i went ahead and just kind of manually edited these images so that they're roughly the same height and width that'll be helpful for this if you have wildly different sizes on your images you might run into some issues just following along with this tutorial so a couple of packages that we are going to need so i'm going to do yarn add and then react icons which isn't entirely necessary but i'm going to use it for the custom buttons that we're going to make and then react slick and slick carousel and these last two are the ones that you need for the um for the carousel stuff to work all right so now that that's installed i'm going to start up the server here cool so we've got our app so i'm going to hop into app js in here we can actually get rid of all this stuff in the middle up at the top we can get rid of this logo since we're not using that anymore we're going to have a couple of imports so we are going to be using use state we're going to want to import the slider from react slick and then we're going to import all of the assets that we're using so i have astronaut coming in from dot slash assets and i'll just duplicate that all right so these are the names of the files i'm just importing them so that we can use them in this project and i'll give it a save so right now all we have is this div i'm going to cut this out i'm going to return the div with some stuff inside of it that stuff is going to be composed of our slider and then our slider is going to map through these different images so if you're pulling these in from an api that's fine as well and again if you're collaborating with somebody and you have the opportunity to talk with a designer or somebody else that is using these images if they have the ability to make these images the same size that'll be helpful otherwise you'll need to take care of that on the way in with your css so with this we're just going to be using these local files so we can create an uh an array of images so we'll do const images equals an array and then we'll just reference each of our imports so astronaut celebrating education and taken and then in our slider what we can do is map through those images so images.map and for each image and images index we're going to return a div inside of that div there is going to be an image with a source of image and we'll just give the alt the image as well um probably better ways to handle that but for now we're just working with these static assets um and that is good for now now we actually need to utilize our slider so with react slick it's going to expect a series of settings which are declared in a settings object so what we can do here is inside of our function we can create the settings object we're gonna set infinite to true so that it just continues to cycle throughout our images we only have four but if you saw in that initial demo if i i could click right over over over and over and over again and it would just continue to cycle through these four we'll do lazy load as true we'll set our speed to 300 or 300 milliseconds it defaults to 500 and this is going to line up with some css transitions that we implement in a little bit we're going to have slides to show of three center mode we'll have as true and then center padding will have a zero so if we look at our app right now it's not gonna look awesome just yet so we have previous over here we have like some super wide stuff going on so what we need to do with react slick is actually import their base css so i'm going to open up our app.css and split it to the right so all this stuff we can get rid of so we just have our app and then at the top we need to do a couple of imports i'm going to copy and paste these over so this is helping us out with some default styling so now you can see our images are showing up we're still having some issues with the buttons and everything but you can see it it's already looking a little bit better so now inside of our app let's go ahead and give it a width of 50 we can give it a margin of 10 rem top and bottom and then auto side to side okay so now we're kind of centered up a little bit we can also set a a height on this so we'll do 570 pixels just to kind of rain in the slider a little bit and this is all for desktop just to make sure that we're not going to um go beyond the uh the height of our container here next what we're gonna do is we are going to um actually utilize a a property on this settings object that will allow us to use custom arrows so right now the arrows aren't showing up because there's no styling on them but since we're going to go ahead and build custom arrows anyway we can just add this in now so next arrow is going to be a component called next arrow that we have not yet built and then preview arrow same thing we're going to go ahead and build these now so above our settings we can create a next arrow we're going to take in the on click prop so that's going to be passed in via the slider component what we're going to be doing here is actually spreading in our settings object and since we're referencing this next arrow this slider component knows that the next arrows on click handler should move the move the carousel to the next image and same thing with previous so what we can do is since this next arrow knows to expect an on click that is passed in through props and so now all we have to do is return a div and we'll give it a class name of arrow which we'll share with the previous arrow and then next which will be its own unique class name and then on click it's just going to be set to that on click that comes in via props and then in the middle of our div what we're going to do is we're going to import fa arrow right and fa arrow left from react icons slash fa so this is what we're using this for again this part is this icon part is optional and feel free to change up the icons that you use as you see fit so for our next arrow we'll have fa arrow right and then we can actually just copy this next arrow and make some changes so the previous arrow is also going to take in on click through props and pass it through we're going to change this class name to arrow prev so it'll have these two classes and then fa arrow left so let's save take a look at what we've got so far cool all right so we have our arrows they are cycling through the images so that's a good start obviously we have some work to do so you can actually see these three images that are being shown we'll apply some styles in our css to make sure that it looks better than it does now so in our slider what we're gonna do here is we're gonna watch the index of our images and then we're gonna apply some some styling based on that index so we need to do two things number one we have a class name where if the index is equal to the image index which we have not yet set then we're going to have a class name of slide and active slide if it's not then we're just going to have slide let me build this image index part out and then i'll come back to this and show what's going on so before we had this import use state we are actually going to be updating our image index in this settings object so up top we'll have const image index and set image index and we'll have an initial state of zero then using the before change property on the settings object we've got current and next coming in and before the change we're going to set image index to next so basically what's happening is in the settings object we have this before change method and when you click on the arrow to either go next or or previous so the next slide or the previous slide we're going to update that image index to whatever the next slide is so that's going to manage this piece of state then since this images map has in this case four images each with their own index it's going to look at the image index if this image index matches the index of the image itself then we're going to add this active slide class if it doesn't match then we'll just have the regular slide class so far we're not going to see anything because we have not yet applied the css so it should look pretty much the same so at this point now we can start with our styling and we should have i believe all of our app.js stuff but we'll take a look as it comes along so for our slide class any image inside of that class it's going to have a width of 20 rem and then a margin of zero auto we'll give the slide class a transform scale we'll do 0.2 we'll give it a transition on just the transform property of 300 milliseconds so this 300 milliseconds is meant to match the speed here at which these slides transition from one to the next and then we'll give it an opacity we can say 0.5 so now if we take a look at our application you can see that the scaling it's been scaled way down and there's some opacity so this is our initial each slide is getting this class and so what we want to do is we want to apply that active slide class to the center image so that it blows up and gets nice and big and clear so with our active slide class we can transform our scale we can do 1.1 or 1.0 and give it an opacity of one so now it's in the middle and you can already see the effect that it's taking so now all we have left to do is just a couple of different positioning things so let's go ahead and rip through that real quick so for our arrow and our arrow is applied to both our next and our previous arrow so for arrow we'll do a background color of white we'll give it a position absolute um cursor pointer and we'll give it a z index of 10 just to make sure that it can be clicked on sometimes we fall into this issue of overlap and the arrow is uh like kind of in a disabled state uh seemingly because you can't click on it because of it's it's positioning so then the so that'll be applied to the div itself and then uh the svg which is the actual icon so we'll do arrow svg we're going to give that a transition on the color of 300 milliseconds and then when we hover on the arrow we're going to change its color to 6 8 edf and this just matches the color that the images the like the svg icons have or the svg excuse me the png images that we have in our assets then for our next arrow we'll give it a position of right at zero percent and top at 50. and then for our previous we'll have left at zero percent and top at 50. and let's take a look so we hover over it you get the nice little color change goes backwards goes forward all through and one quick note you'll notice that these are staying static these arrows um a couple of things to to note um one is it helps to have the images of the same size and two with this height if we didn't have a height on this and the images were different um different sizes you might see those arrows start to bounce around so those are a couple things to keep in mind if you run into any issues and need to troubleshoot so thanks for following along if you have any questions on this please feel free to drop them in the comments i'll leave a link to this repo for your reference as well as links to react slick so that you can check out their documentation because they have a lot of really cool examples but again thanks a lot i hope you enjoyed the video and until next time have a good one

Channel: Chris DeSilva

Views: 25,220

Keywords:

Id: odSfSAoUREU

Length: 19min 22sec (1162 seconds)

Published: Mon Nov 16 2020