How To Make Ecommerce Website Image Slider with HTML CSS Javascript -EASY TUTORIAL

ever since i was a little boy i was obsessed with making things specifically websites so today what i thought i would do is give you guys a little tutorial on how we can create a product slider for your ecommerce store using html and css so without further ado let's just get right into it this is going to be what it looks like um i'm just going to add it on down the bottom of this little um landing page that i've made for this you know just makeshift hiking page that i've created it's pretty cool so that's what it looks like we've got the images there and then we've got the buttons on either side and that's going to allow the products to slide left and right across our screen looking very smooth so yeah you can see down below when you hover on the image there as well you can it kind of changes color and there's an add to wish list option also with a you know little 50 off detail there we've got the brand name a little description and then the price the actual price and then we've got the price um that it was before that it's you know it's been slashed basically it's the uh it's it's the deal that's on at the moment in that store um so yeah that's basically all there is to it we're just gonna do it down below here and we're gonna hop right into it this is just a feature that you're gonna add to your website so you've probably already started using and completed the header on whatever website that you've done or not you may be just starting a new fresh one that is all good but today we are just going to be adding on to what i've already got so we've got the css file here for the header and then we've also got the html file there as well and that's just going to be basically all our source code that we've got so far we're going to be adding on to the css code for this product slider underneath here and we're going to be using the images in this folder all this is going to be on github so don't worry you can download and tweak it or whatever um but yeah so basically i guess there's nothing else really make sure you've linked your style sheet um that's very important and then later as well you'll have to link the javascript file but we'll get into that when we come to it so i guess now we just uh jump right into it grab yourself a cup of coffee whatever you like to drink a little snack and we're just going to start coding so feel free to code along with me pause and stop the video whenever you need and you slow it down whatever you need to do let's just get right into it all right so let's just go up here and we're going to save our project and you can just see here over on our website we've opened the live server and you can see the image displayed here uh the little best selling uh heading that we've got there as well we've got the two arrow buttons and we've also got you know the uh 50 off and amongst other things down there the description what not now it's time to add the css uh to the actual project so we'll just jump into that right now just before we hop into the css i'm very hungry so i'm just gonna go and make myself some noodles real quick uh i'll be right back anyway yeah sorry you had to watch that on to the next part yep all right so now that we have the css done we're just going to go over to our html section and we're going to just quickly add another card so we can kind of get the slideshow feeling going i can show you guys what's going on you're just going to want to copy this section here the product card and we're just going to just for this the sake of this part right here we're going to copy and paste it once and you'll just be able to see in a second when i save this that uh it just pops up next to it so yeah that's that's basically uh the start of our little slideshow pretty cool um it's looking very sleek i like the look of it right now but we'll just actually change this little part here to card two so we're just changing our image and obviously the image will change there on the our website as well so okay and basically we're just gonna copy our first image eight more times so that we're gonna have ten images in total and then we can kind of you'll kind of see now what uh is going on so if you if we go and try and click the buttons here you notice that they actually don't work so that will be our next step we're going to be focusing on doing the javascript section of this tutorial right now so what you're going to want to do is go into your folder here and just create a new file call it script.js and just make sure that you put this down the bottom of the body of the html very important otherwise nothing is going to work that's all done now we're ready to go and we're actually going to make these images slide across the screen now when we click those arrow buttons so yeah this is the fun part and uh let's get right into it [Music] so [Music] so [Music] [Applause] okay guys i just want to butt in really quickly here when you're creating this final function i want you to make sure that you change this little section down here see where it says plus equals container width we're going to just want to make sure that the second function is a negative equals so because we don't obviously want both arrows to go the same way um we want it so that when we click one arrow uh the images slide one way and then when we click the other arrow the images slide the other way so just make sure to make that little change uh but yeah so hopefully that should work all good now we'll just save that and test it out so i'm just clicking on the buttons here and it doesn't seem to be working so let's just hop back into our code and see what we've uh what we've done wrong here so um just check this first function that seems to be all good and then we'll check there as well [Music] yeah um okay no okay i see what we've done wrong here alright so see where it says next button here we've actually created two constant variables uh called next button we just want to make sure one of them is pre button so that just differentiates the two arrows and gives them separate um gives them separate functions so there you go and here's a live example of the product slider working so yeah that's pretty much it i don't really have any other tips to give you guys um again the source code is going to be on github so i'll make sure to upload that and put the link in the description all the files will be there all the images and whatnot i'm really enjoying making these tutorials for you so um yeah i guess it would really help if you could like and subscribe and just drop a comment on what i should make next uh in the next video because yeah i just uh it really helps me out and i i guess just gives me that little i don't know that little boost of confidence to keep going so um yeah i really appreciate uh you guys watching and staying till the end and i yeah i hope you guys have a lovely day and until the next video i'll catch you guys later

Channel: Devression

Views: 152,702

Keywords: html ecommerce, ecommerce website design, how to make ecommerce website, html and css, image slider in html, product slider in html, product slider html css, product slider javascript, responsive product slider, product card slider html css, html, css, javascript, web development tutorial, web development, web development for beginners, front end development guide, html css beginners tutorial

Id: OQZNAMjC6Vg

Length: 12min 12sec (732 seconds)

Published: Sat Nov 13 2021