How To Make Ecommerce Website Image Slider with HTML CSS Javascript -EASY TUTORIAL
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- How To Make Ecommerce Website Image Slider with HTML CSS Javascript -EASY TUTORIAL
The purpose of this video is to help new web developers and programmers upgrade their skills when building websites using HTML, CSS, and Javascript.
If this video helped you, please subscribe and like the video! It helps me out so much!
Source code: github.com/dev...
Tags:
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
Finally no library, no plugins just pure custom slider. Thank you so much!
thanks for watching :)
Same! This is the tutorial I'm looking too! Finally after 3 days of searching hehe
In the css file, I don't understand at which moment de class "collection-container and collection" comes in ! Pls could you help me ?
I don't understand. where is class ="collection-container" and it's nodes, in HTML.
Thank you so much it worked! The only thing I'm having trouble with is getting my images to lay horizontally, instead they're stacked vertically. Could you help me fix that? I'm not sure what I missed.
what is the use of ".collection-container", ".collection", ".collection img", ".collection p", ".collection:nth-child(3)" in style.css ?
th-cam.com/video/9uIRO279HO8/w-d-xo.html
i got confused too, like what is the purpose of this part in css? cause i dont see one that use in his html code. Please explain to me cause i am a new in here
Love that this is pure coding no plugs🎉
hey there is no class called collection-container so why did he add that into the site?
Thank you man ! Thanks to you I passed my bachelor
Congratulations bro!
lol
thanks a looot, this is the most simple yet the most efective solution I've ever seen
Pls when and where do you introduce a class named collection-container ?
Thanks..!! But it would have been great if you spoke while writing the js part.
what's that collection container? does that do anything?
Thanks for the video! It was very helpful! 👍👍
Keep up the good work!
No problem man, thank you for the feedback!
You should explain this in details for beginers.
nice vanilla js the best now we understand the code not like libs or framworks than k u so much brother
There is one element with classname pre-btn and nxt but in javascript you are doing like pre-btn[i]. It doesnt make sense at all
I have a problem when I copy the first carousel but the wnd one in the same html my scroll view is going down
thanks bro, finally i found the right video, THANK YOU!!!
thank you, sir we want more projects, create with pure JavaScript
I'll do this :)
awesome dude! very helpful, thank you! keep up the good work!
thank you bro!
It looks like You have defined .collection class in css but it's not in html, so it does not work
Thanks bruh u saved my web project
Glad this helped bro!
this is so great, make a product slider from scratch. thank you sir
Cool production man!!want to see more..
thank you bro!
Worked thank you alot! you're the best bro liked
thanks brother with your code i finished a project thanks a lot
Good to hear bro! Thanks for watching :)
@@dev_ression give a link for a small donation for caffe
i just started studying javascript and css i need help many times can i contact you privately ???
bro do you understand why he uses collection in css although there is no class in css with collection
dude, you know why in Chrome the slide transition when changing product is abrupt?, but in Firefox works correctly. Thanks for the video, it’s excellent
Great projec, oww you really ROCK!
Thank you for watching :)
It worked! Thank you from Brazil!
thank you for watching!
Nice one Keep it Up
thank you so much bro for such an informative video
This is very helpful ,thank you so much !
Hello sir, please I'm curious about something. The html doesn't have a class called collection-container and you include it in your css . Please I'm confused
No hablo bien el idioma inglés, pero aun así pude entender perfectamente todo. Excelente vídeo, saludos desde Argentina.
thanks, the video tutorial helped me
Glad you hear, thanks for watching!
that's what i needed
glad it helped bro!
just wondering if there is any way to make "containerDimensions.width" variable in the js to update when the screen size is changed. At the moment the slider moves the width of the page as of when it was first loaded.
hey brother, did you find the solution to this perhaps?
that noodles looked good
they were bro!
It is crazy how you are not using eslint error debugger, anyway good tutorial ♥
Thanks bro.It was very helpful
Thank you!
Thank you so mutch
did you just uploaded .zip file to github?
you are a legend. Thank you
thanks for watching bro!
@@dev_ression bro do you understand why he uses collection in css although there is no class in css with collection
Hey, great vid!
But how can i change how much it "slides", say in a small screen, only 1 or 2 at the time, or enough to cover the screen
keep up
Where's the collection-container in the html file?😭😭
+1
How does this work with an api? like with youtube api, and i have a bunch of images of thumbnails being called at once?
nice content brother, helps a lot!!
I’m glad bro!
@@dev_ression hey bro, can you help me to make the slider responsive on mobile?
when i sroll to right or left, the slider runs too much.
Do you know of a way to adjust how much it scrolls both left and right?
Hi, Thanks for sharing this. Please help to share with mobile & cursor swipe scroll also.
Thank you for sharing bro
Hei, Great Job!!! could i show to fetch post or items API to the slider? Thank :)
i love it!! new sub
th-cam.com/video/9uIRO279HO8/w-d-xo.html
Nice one brother ....
Thanks bro
Thanks man. You really save my ass
Thanks 🤗
Thanks alot
Thank you.
thanks for watching :)
Let me know what other tutorials you'd like to see!
Full functioning website
Very nice video 👍
Thank you bro
is there a version with this vertically?
Thanks!
It's also make with the help of bootstrap
Hey thanks this is really helpful. One question, when I switch it to mobile view and the cards are all vertical, one on top of the other, what should I change or add in css so that the arrows come to the top and bottom of the container instead of left and right.
Arrange the elements of inner carousel basically cards using flex-box , flex-row
thanks man.
thanks for watching man!
thanks man
Thanks for watching!
bro please tell me how can i make this slider responsive?
Plz give the link of both arrow pic
How would you make this an infinite loop?
I've followed this tutorial to a tee but can't get the product cards to sit in a row - they only display in a column. Any help?
Set your product-container to display flex.
I tried everything but my slide doesn't work? Idk
same
TH-cam is full of fake tutorials, watch out. They upload some random crap to collect subscribers.
@@ildikoedit9110 sounds like you’re doing everything except figuring out the bugs in your code 👋
@@dev_ression I have already figured it out, thank you. But it doesn't change the fact that this code doesn't work.
@@ildikoedit9110 I’m sorry you must be doing something wrong. If you watch the video, you can clearly see it does work.
nice👍
bro where is collection container
check the source code, it not working.
How to make it infinite??
Where is the collection class in your HTML? It´s confusing cause I can´t see it...
same question
For some reason it doesn't work in my case. I downloaded the css and js code from your github repo, but when I click any of the buttons, it just scrolls all the way to the end/start in a blink of an eye, so no transition duration :/
Because you are not learning nothing, you shoulnd't just download some random code, learn how it works, then try it by yourself
@@zenintz8826 Sry bro but first try to learn some basics of grammar, your comment doesn't make lot of sense
@@alberkulicka954 I'm not native english speaker. It doesn't matter. Learn how to code, don't copy-paste, simple :) Dumba$$
@@zenintz8826 Who cares about what you are? Learn it (same as your advice to my coding). Learn how to write, don't be illiterate, simple :) Sw€€ti€
Please record more video teaching to share knowledge
Legend
Appreciate you
clean
please can you send me fil source code i don't know how i can get it
is this responsive?
savior
Glad it helped you bro
You never know how much you have in common with so people.
Hey.. my pre btn doesn't work plzz help me out. I'm trying so many hours 😩😫
th-cam.com/video/9uIRO279HO8/w-d-xo.html
try:
position: absolute;
top: 50%;
transform: translateY(-50%);
Can you send me the js file by making it ts file
Colletions container WTF!!!
5:44
Activa windows porfa
hahaha never
it look like u copy past but with typing unless u are so good
9:12
What we need for web design just make a video
I liked the video up until where you didn't bother to explain where the .collection-container emerged from.😮💨
I'm sorry you feel that way. This is quite an old video, it may be worth checking out my updated slider video on my channel.
@@dev_ression Ok. Checking it out.
Good job bro, JESUS IS COMING BACK SOON;PREPARE
działa
This doesn´t work. It´s so bad to take time for such tutorials which just collect views and don´t work at all. I can do this with bootstrap but I wanted a tutorial which works with vanilla JS.
Strange. When you download the code from GitHub, you’ll find it does in fact work :)
@@dev_ression I won’t download anything. Uploading a zip file to github is unnecessary. Poor quality of your work.
No one will ever understand your video
Wrong
I disagree! It's actually easy to understand if you know what you're doing😊.