How to make a Card Slider in HTML CSS JavaScript | Carousel Tutorial

all right guys today I'm going to be showing you how to create a card slider or an image slider of some sort in HTML CSS and JavaScript so as you can see uh we've got these cards here they've got an about me and a higher me section with the social icons at the top here so obviously you can link the socials for that specific employee and you can move the cards across uh slide them across by clicking either the arrows here or the little pagination toolbar down at the bottom so yeah that's basically what it looks like right now guys um I think we're just gonna hop straight into the HTML and get started okay so before you guys do anything I want you to create a new folder on your desktop and I want you to call it card dot or Dash slider and we're going to drag it here into our vs code and create our first uh source file and it's going to be called index.html so then you're going to use the shift one shortcut in vs code and it's going to create the little HTML template here for you and now I've just copied and pasted this section in here this is the slider CSS so make sure you guys put that in otherwise there's going to be no functionality you're not going to be able to slide your cards across on the screen and we've also just included the font awesome CDN link which is going to going to allow us to use the different icons for our social icons on each card so once you've done that open up your live server so you can see what you've got right now and uh I think besides that you're good to go so I'm going to speed up the video and uh yes make sure you guys sit back grab something to eat or something to drink and just come code along with me [Music] foreign [Music] now guys when you get to this section here this is for the actual images so this is what the headshots are going to look like of all the different employees on all the different cards and right now we actually don't have any images in our program or in any folder connected to our main folder our card slider folder so what we're going to have to do here is I've already created a folder of images so these this is what I've got right now I've got nine uh different uh headshots you don't have to specifically put anybody in there that you know um yeah I just used stock images and you can slide that folder over into our main card slider folder so as you can see now when we go into vs code and we just look at our file explorer you can see that it appears there next to our index.html and now you can see that the image will be displayed nicely and everything's well working if everything is not working you're going to make want to make sure that you've named your files correctly and you're making sure that you type in the correct file name in your HTML code that is very important it has to match and make sure that the image images are in the same folder as your source code so uh yeah once you've done that guys uh let's just continue on with the HTML [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] [Applause] [Music] foreign [Music] [Music] foreign [Music] [Music] [Music] foreign [Music] [Applause] [Music] foreign [Music] thank you [Music] [Applause] [Music] thank you okay guys so that's pretty much all we need to do for our HTML um just make sure at the end that you add your swiper bundle for your JavaScript so you need to attach that script and make sure the source is the exact same uh source as mine here and you also want to make sure that you connect your script to uh your HTML document so make sure it's your period slash script.js and then we'll go up here and we'll also make sure to add our style sheet for our CSS so um yeah let's just add that link really quickly and make sure our href is style.css which uh is going to be the name of our CSS file we might as well create those now we'll do um yeah so we'll add style.css and we'll also while we're here grab script dot JS as well so create those two files and then you're going to be all sorted so they are linked down the bottom of our HTML and at the top there so yeah as you can see that's our HTML done and as you can see our program doesn't look like what we want it to but that's okay because this is when we go and start doing our CSS so let's just hop right into that now and I'll speed up the video again foreign [Music] thank you [Music] [Music] thank you foreign [Music] [Music] foreign [Music] [Music] [Music] I don't know [Music] foreign [Music] [Music] thank you foreign guys so that is the end of our CSS code we're going to hop right into the JavaScript now so as you can see there's only one card being displayed on our slider um that's obviously not what we want we want to see all three there and then be able to uh click those arrows on the side there and create that sliding effect that you saw it at the start so uh yeah let's just hop right into the JavaScript and I'll show you how it's done I don't know [Music] [Music] [Music] all right guys so as you can see that's our JavaScript completely finished uh you can see now that when we click these arrows on the side the cards will slide across the screen and we can also click these little pagination bullets down the bottom and the cards will move also uh yeah so here's just a preview of what we've got so far but the only problem is our pagination bullets are a little bit too close to our cards uh and it just doesn't look a hundred percent um neat in my opinion so what we're going to do is we're going to go back into our CSS section here and above our swipe or pagination bullet class we're just going to add our uh we're just going to add like a swiper Dash pagination class and we're going to Target that class specifically so that we can give it a property of we're going to give it a position property of absolute and then we're also going to give it a top property of 450 pixels so what that's going to do as you can see right now when I refresh it those bullets will move down and it'll just create a nice cleaner look for our page and that'll still work um we've just moved them around so the functionality is the same nothing's really changed just the actual layout of our little our program there specifically those pagination bullets so yeah um everything's good guys we've linked everything correctly we've linked our JavaScript we've linked to the swiper bundle and we've also linked our font awesome CDN and our link swiper CSS and we've also added our CSS style sheet there as well so I hope you guys enjoyed the video and if you did please make sure to give it a massive like and comment uh what video you would like to see next and please be sure to subscribe as well and put those notification bells on because that really helps me um just uh get my videos out to you guys a lot easier for you to see so yeah um until next time I hope you guys are having a lovely day and I'll see you in the next video

Channel: Devression

Views: 15,919

Keywords: javascript card slider, html css javascript card slider, how to make card slider in html and css, html css carousel, javascript carousel slider, html css beginner tutorial, javascript beginner project, html css project, html css website design tutorial, html css projects for beginners, card slider html css js, carousel slider html css, html css ecommerce website, ecommerce website html css javascript, web development projects, card slider html css, html, javascript, css tutorial

Id: GxZmYudt0l8

Length: 17min 22sec (1042 seconds)

Published: Wed Oct 19 2022