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
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.
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
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
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 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.
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 :/
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.
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 ?
Let me know what other tutorials you'd like to see!
Full functioning website
lol
thanks a looot, this is the most simple yet the most efective solution I've ever seen
Love that this is pure coding no plugs🎉
I don't understand. where is class ="collection-container" and it's nodes, in HTML.
It worked! Thank you from Brazil!
thank you for watching!
Thank you man ! Thanks to you I passed my bachelor
Congratulations bro!
Thanks for the video! It was very helpful! 👍👍
Keep up the good work!
No problem man, thank you for the feedback!
Worked thank you alot! you're the best bro liked
thanks bro, finally i found the right video, THANK YOU!!!
Great projec, oww you really ROCK!
Thank you for watching :)
nice vanilla js the best now we understand the code not like libs or framworks than k u so much brother
Thanks bruh u saved my web project
Glad this helped bro!
awesome dude! very helpful, thank you! keep up the good work!
thank you bro!
Cool production man!!want to see more..
thank you bro!
what is the use of ".collection-container", ".collection", ".collection img", ".collection p", ".collection:nth-child(3)" in style.css ?
ruclips.net/video/9uIRO279HO8/видео.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
You found ? Pls help me, i am new @@icecreamre21
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
this is so great, make a product slider from scratch. thank you sir
thanks, the video tutorial helped me
Glad you hear, thanks for watching!
This is very helpful ,thank you so much !
thank you so much bro for such an informative video
thank you, sir we want more projects, create with pure JavaScript
I'll do this :)
Nice one Keep it Up
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
Thanks..!! But it would have been great if you spoke while writing the js part.
that's what i needed
glad it helped bro!
You should explain this in details for beginers.
what's that collection container? does that do anything?
Thanks bro.It was very helpful
Thank you!
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.
Pls when and where do you introduce a class named collection-container ?
i love it!! new sub
ruclips.net/video/9uIRO279HO8/видео.html
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
hey there is no class called collection-container so why did he add that into the site?
Nice one brother ....
Thanks bro
you're amazing
No hablo bien el idioma inglés, pero aun así pude entender perfectamente todo. Excelente vídeo, saludos desde Argentina.
Thank you so mutch
Very nice video 👍
Thank you bro
Thank you for sharing bro
bro please tell me how can i make this slider responsive?
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
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?
nice video
Thanks 🤗
did you just uploaded .zip file to github?
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
Where is the collection class in your HTML? It´s confusing cause I can´t see it...
same question
Thanks!
Hei, Great Job!!! could i show to fetch post or items API to the slider? Thank :)
It is crazy how you are not using eslint error debugger, anyway good tutorial ♥
It looks like You have defined .collection class in css but it's not in html, so it does not work
Thank you.
thanks for watching :)
Where's the collection-container in the html file?😭😭
+1
Thanks man. You really save my ass
that noodles looked good
they were bro!
I have a problem when I copy the first carousel but the wnd one in the same html my scroll view is going down
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
Thanks alot
thanks man.
thanks for watching man!
keep up
How does this work with an api? like with youtube api, and i have a bunch of images of thumbnails being called at once?
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
is there a version with this vertically?
I tried everything but my slide doesn't work? Idk
same
RUclips 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👍
Hi, Thanks for sharing this. Please help to share with mobile & cursor swipe scroll also.
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.
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€
How to i add animation
How would you make this an infinite loop?
Plz give the link of both arrow pic
check the source code, it not working.
Hey.. my pre btn doesn't work plzz help me out. I'm trying so many hours 😩😫
ruclips.net/video/9uIRO279HO8/видео.html
try:
position: absolute;
top: 50%;
transform: translateY(-50%);
is this responsive?
It's also make with the help of bootstrap
clean
Legend
Appreciate you
please can you send me fil source code i don't know how i can get it
bro where is collection container
How to make it infinite??
Please record more video teaching to share knowledge
You never know how much you have in common with so people.
savior
Glad it helped you bro
Can you send me the js file by making it ts file
Colletions container WTF!!!
Great tutorial but speak while coding it helps us to understand the context better rather than you coding fast and not sharing wat u doing mate
I'll keep this in mind for future videos, thank you
5:44
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.
it look like u copy past but with typing unless u are so good
What we need for web design just make a video
Activa windows porfa
hahaha never
9:12
Good job bro, JESUS IS COMING BACK SOON;PREPARE
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.
i beg you talk the next time u do a tutorial cuz theres like 0 tutorials wheren obody talks n itll make u stand out
działa
No one will ever understand your video
Wrong
I disagree! It's actually easy to understand if you know what you're doing😊.
thanks man
Thanks for watching!