Build an Image Carousel with Embla in React

what's going on you guys Claire welcome back to the channel cook Commerce and in this video I'm going to show you a pretty cool react package I found called emblem Carousel and basically it's just a lightweight uh Library you can install in react or not just react also next.js views felt and some others as well and it's just a carousel um a carousel Library you can install and this is what I have right here if I refresh you can see it just kind of Scrolls through on a timer here so this is the first image and it automatically Scrolls to the next we can also kind of scroll through manually as well and there's lots of cool other like functionalities you can add so if you want to see how you can add this to your own react project maybe a resume for example or some work for a client then let's go ahead and get started so um just go to imbladash carousel.com that's their website and what I'm going to do is I'm in vs code I'm going to open this up and what I'm going to do is go ahead and create a brand new uh react app using Create react app so I'm going to move over to my desktop here and then let's go ahead and create our react application MPX crate Dash rack Dash app I'm going to call this we'll call it emblem project like so so let's go ahead and create our react application here all right so happy hacking that means we're ready to go I'm going to go ahead and pull over my folder here that we just created just the inblo dash project okay all right and okay so let's go over to the website you should have it pulled up by now emblem carousel.com and what we're going to do here is let's go ahead and click on the menu and under get started as you can see react views felt typescript um you can use a CDN as well where it's gonna be installing uh locally into our project here so go ahead and click on react and what we need to do is just install the package here so let's make sure we copy that and let's open this up and let's just go ahead and install the react Carousel here could be just a second and I'm just going to delete a couple of these things here that we're not going to be using so let's go ahead and get rid of a couple of these um there we go all right I switch between all these keyboards it gets confusing all right so let's get rid of those there uh the app.test we can go ahead and get rid of that looks like we're done installing um it looks like we're done installing the carousel so let's go ahead and just npm start real quick to start on 3001 I already have the demo running [Music] um so let's see we'll say local 3001 and probably get some error since we just deleted a few things so let me go ahead and take care of that okay so let's go into our app.js and you don't have to um you don't have to delete this stuff I was just doing it to save a little bit of time here um so let's go ahead and delete everything inside of this header and we'll just import yay from react there we go and Report web vitals let's go into our index.js we'll just get rid of that there okay so you can go ahead and close the index.js we don't need to use that anymore that should clear up all of our errors there so let's go back and we can go and stop the server let's go ahead and go back to embla Carousel so we just installed the the react package so next what we want to do is let's create our component structure right so let's go ahead and copy this here now um we're going to do this inside of our source folder and let's just stick to good practice and put this inside of a components folder so what I'm going to say is components slash embla Carousel is going to be the name of our component and what that's going to do is just create a component inside of the components folder that we just created and let's just go ahead and paste that one in there like so perfect now um next what do we want to do here let's go into our app.js and we're just going to paste our component in there so it's going to be the imbla Carousel just like so and we want to import this in Black carousel from components Flash and blur parasail all right now let's go ahead and start our server just kind of see what we have on the screen now we're not going to be able to see anything quite just yet but there we go oh what happened you know moving these things around all right 3001 is where we want to go yes and let's see here so next we need to add the CSS okay so let's go ahead and add the CSS so all we have here is a blank screen for right now close that you can see her slides in there okay and you can actually see we're actually we're able to move the slide just because we've installed the package and we have our we have our code in here we just have text in there instead of images so you know what let's go first let's just go ahead and use some images and what I'm going to do is just copy over some images we're going to be grabbing these from unsplash um you can use locally if you'd like to do that as well either way is just fine so I'm going to paste my first image in there just like that there we go and I'm going to grab my second image here's my second one in here and just go over this slide two and I'm gonna grab my third image so only three images you can have as many as you like uh to my knowledge I don't think there's there's a limit here within emblem carousel so there we have it so as you can see they're just massive here let's take care of this some CSS next um so let's head back over to the I'm gonna go ahead and close the demo there let's go ahead and head back over here and copy over this CSS and I'm just going to put this inside of let's put this inside of our we'll do index.cs that doesn't really matter let's put it inside our index.css let's go ahead and paste that in there just like that and um those the images are super it's it's massive image right now as you can see uh let's go ahead and give it just one more uh additional styling in here and what I'm going to do is so if we look at our Carousel here we look at our Carousel so we have the imba class name for the outer div then we have a container and then we have a slide each slide is what we want to style right so that MLA slide we're going to style the image within that so let's go in here and what I'm going to say is imla embla slide has it forced there IMG I'm just going to set the width to 100 there we go all right switch this over there we go so let's see what that did oh there we go looks better already um let's go and refresh this and see if it's doing anything probably not yet I mean so that's that's basically it we can have a slider in there let's add some extra functionality um because right now it's not scrolling through on its own if you notice if we refresh we want this to just automatically scroll so let's go back to the inblock Carousel site here and we just took care of the styling so let's go down here to accessing the imbla Carousel and as you can see here we have options here so let's go ahead and let's see adding plug-ins let's add this auto play here so what I'm going to do is just copy this over import this and I'm going to add this into our input Carousel component here so let's just add this right here we have to import that and I'm going to copy this over just going to replace this here just to make it easy paste that in there like so and right now oh can't resolve envelope Carousel auto play so I think we're gonna have to install this so let's head over to this plugins here click on auto play yep just gotta install it so let's do that super quick stop the server and install super fast again you can also use a CDN if you prefer I'm just installing it to the to our CR package here so I'm going to say npm start and let's see if that takes care of anything yes we're going to be on 3001. so this should now be on autoplay so you see here I'm going to take my hands off and hopefully if we don't have any errors this should auto play um and let's see up there it is cool cool awesome so that's the basic functionality of emblem if we go back over to the emblem Carousel website to look at the documentation uh you can do lots of customizations for example um here let's do this one Let's uh where let's delay let's do the uh the loop so let's go back here right now and so as you can see we're kind of stuck here you can scroll to one side we only have three images but we're stuck after three so we can just change this Loop here whoa change change that to true and now we should be able to kind of loop through all of our images so let's just look again might need to refresh oh there you go let's refresh this thing the loop true we should get back to our first image there you go awesome so yeah lots of customization you can do this you look into it and play around with it let me know what you think thanks for watching the video you guys smash the like button and I will see you on the next one

Channel: Code Commerce

Views: 14,755

Keywords: web development, react, web dev, web, coding, programming, javascript, image carousel, image library, react image slider, image slider, embla carousel

Id: S5RzbQo4vaI

Length: 9min 35sec (575 seconds)

Published: Mon Apr 24 2023