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

[@christianalip9306]

Finally no library, no plugins just pure custom slider. Thank you so much!

[@dev_ression]

thanks for watching :)

[@jimzontrangia4530]

Same! This is the tutorial I'm looking too! Finally after 3 days of searching hehe

[@AfroBantouDesign]

In the css file, I don't understand at which moment de class "collection-container and collection" comes in ! Pls could you help me ?

[@ImagineThatPuppets]

Love that this is pure coding no plugs🎉

[@YaseenAli08]

I don't understand. where is class ="collection-container" and it's nodes, in HTML.

[@Sammy-rs6cd]

lol thanks a looot, this is the most simple yet the most efective solution I've ever seen

[@felikana5093]

Thank you man ! Thanks to you I passed my bachelor

[@dev_ression]

Congratulations bro!

[@danielrico3352]

Thanks for the video! It was very helpful! 👍👍 Keep up the good work!

[@dev_ression]

No problem man, thank you for the feedback!

[@pratik207]

Thanks bruh u saved my web project

[@dev_ression]

Glad this helped bro!

[@manidalnaso]

thanks brother with your code i finished a project thanks a lot

[@dev_ression]

Good to hear bro! Thanks for watching :)

[@manidalnaso]

@@dev_ression give a link for a small donation for caffe

[@manidalnaso]

i just started studying javascript and css i need help many times can i contact you privately ???

[@aliansari799]

bro do you understand why he uses collection in css although there is no class in css with collection

[@nicolaspinheiro8315]

It worked! Thank you from Brazil!

[@dev_ression]

thank you for watching!

[@ranishkumar8398]

what is the use of ".collection-container", ".collection", ".collection img", ".collection p", ".collection:nth-child(3)" in style.css ?

[@SK-ln6nm]

kzbin.info/www/bejne/b6asg4JobJ57hZo

[@icecreamre21]

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

[@thanhhieunguyen3949]

You found ? Pls help me, i am new ​@@icecreamre21

[@roronoazr3252]

nice vanilla js the best now we understand the code not like libs or framworks than k u so much brother

[@zayyanusmani4717]

Nice one Keep it Up

[@AbbaJi-gm4vc]

Thanks..!! But it would have been great if you spoke while writing the js part.

[@roshangeorge97]

Cool production man!!want to see more..

[@dev_ression]

thank you bro!

[@funterban6536]

thank you, sir we want more projects, create with pure JavaScript

[@dev_ression]

I'll do this :)

[@king-Ola4987]

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

[@moniquenavarro4131]

Great projec, oww you really ROCK!

[@dev_ression]

Thank you for watching :)

[@eoCaraLegalnaVoz]

thanks bro, finally i found the right video, THANK YOU!!!

[@thaotruong7035]

this is so great, make a product slider from scratch. thank you sir

[@kitingBadj]

awesome dude! very helpful, thank you! keep up the good work!

[@dev_ression]

thank you bro!

[@asrorfoziljonov]

thanks, the video tutorial helped me

[@dev_ression]

Glad you hear, thanks for watching!

[@syedaligll7474]

Worked thank you alot! you're the best bro liked

[@AiannaWilliams]

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.

[@fatimazahraelhichami1410]

This is very helpful ,thank you so much !

[@AfroBantouDesign]

Pls when and where do you introduce a class named collection-container ?

[@mobilepiano8018]

You should explain this in details for beginers.

[@gayathriharsha5766]

you are a legend. Thank you

[@dev_ression]

thanks for watching bro!

[@aliansari799]

@@dev_ression bro do you understand why he uses collection in css although there is no class in css with collection

[@AsmaKhan-qf6gd]

thank you so much bro for such an informative video

[@itsEasy-Bro]

that's what i needed

[@dev_ression]

glad it helped bro!

[@AzharTechnoCoder]

Nice one brother ....

[@dev_ression]

Thanks bro

[@pradumanpandey6065]

Thanks bro.It was very helpful

[@dev_ression]

Thank you!

[@gabrielfernandez8975]

No hablo bien el idioma inglés, pero aun así pude entender perfectamente todo. Excelente vídeo, saludos desde Argentina.

[@khaileidoscope]

what's that collection container? does that do anything?

[@statusboyss63]

hey there is no class called collection-container so why did he add that into the site?

[@srbmusic1502]

Very nice video 👍

[@dev_ression]

Thank you bro

[@ZicoNadStarr]

Hei, Great Job!!! could i show to fetch post or items API to the slider? Thank :)

[@dev_ression]

Let me know what other tutorials you'd like to see!

[@jobianstechie]

Full functioning website

[@facundodtd]

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

[@luczztem]

that noodles looked good

[@dev_ression]

they were bro!

[@_litte.san_1233]

nice video

[@doomigoomi]

you're amazing

[@devendraverma9147]

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

[@4PXLZ]

i love it!! new sub

[@SK-ln6nm]

kzbin.info/www/bejne/b6asg4JobJ57hZo

[@t3ntube357]

It is crazy how you are not using eslint error debugger, anyway good tutorial ♥

[@mohdjibly6184]

Thank you for sharing bro

[@michaelluislapak3787]

I have a problem when I copy the first carousel but the wnd one in the same html my scroll view is going down

[@yassirnasri4900]

keep up

[@patrykbogusz5251]

It looks like You have defined .collection class in css but it's not in html, so it does not work

[@jackpre_]

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.

[@LordmkKING67]

hey brother, did you find the solution to this perhaps?

[@housamhegazy2928]

Thank you so mutch

[@anasmujeeb-tq3jl]

bro please tell me how can i make this slider responsive?

[@syedimran3825]

Hi, Thanks for sharing this. Please help to share with mobile & cursor swipe scroll also.

[@maciejka1]

did you just uploaded .zip file to github?

[@Onionbagel]

How does this work with an api? like with youtube api, and i have a bunch of images of thumbnails being called at once?

[@sushantw834]

Thank you.

[@dev_ression]

thanks for watching :)

[@muritalamuideen1947]

Thanks man. You really save my ass

[@gamerthegamer7652]

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

[@staceyross-duncan9742]

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?

[@Chocolita49]

Set your product-container to display flex.

[@benogega2543]

I tried everything but my slide doesn't work? Idk

[@muhammaddelower5522]

same

[@ildikoedit9110]

KZbin is full of fake tutorials, watch out. They upload some random crap to collect subscribers.

[@dev_ression]

@@ildikoedit9110 sounds like you’re doing everything except figuring out the bugs in your code 👋

[@ildikoedit9110]

@@dev_ression I have already figured it out, thank you. But it doesn't change the fact that this code doesn't work.

[@dev_ression]

@@ildikoedit9110 I’m sorry you must be doing something wrong. If you watch the video, you can clearly see it does work.

[@itsdrawing5700]

It's also make with the help of bootstrap

[@An-yh2bl]

Where is the collection class in your HTML? It´s confusing cause I can´t see it...

[@statusboyss63]

same question

[@Chocolita49]

Thanks 🤗

[@missooahmed6607]

Thanks alot

[@amritamazumder2656]

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.

[@RAJUBHAI-ww7em]

Arrange the elements of inner carousel basically cards using flex-box , flex-row

[@alberkulicka954]

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 :/

[@zenintz8826]

Because you are not learning nothing, you shoulnd't just download some random code, learn how it works, then try it by yourself

[@alberkulicka954]

@@zenintz8826 Sry bro but first try to learn some basics of grammar, your comment doesn't make lot of sense

[@zenintz8826]

@@alberkulicka954 I'm not native english speaker. It doesn't matter. Learn how to code, don't copy-paste, simple :) Dumba$$

[@alberkulicka954]

@@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€

[@jimzontrangia4530]

Thanks!

[@MrAbbo11]

thanks man.

[@dev_ression]

thanks for watching man!

[@moremap]

nice👍

[@XIAOx]

is there a version with this vertically?

[@okargbo1986]

check the source code, it not working.

[@virangjain2516]

Plz give the link of both arrow pic

[@nikki3788]

How would you make this an infinite loop?

[@pixbug3359]

Legend

[@dev_ression]

Appreciate you

[@mindethereal6627]

Please record more video teaching to share knowledge

[@giorgijoxadze4178]

You never know how much you have in common with so people.

[@parthdashore46]

clean

[@ayushi4340]

Hey.. my pre btn doesn't work plzz help me out. I'm trying so many hours 😩😫

[@SK-ln6nm]

kzbin.info/www/bejne/b6asg4JobJ57hZo

[@dev_troy8903]

try: position: absolute; top: 50%; transform: translateY(-50%);

[@hemantriffs]

is this responsive?

[@jellyhouse4034]

savior

[@dev_ression]

Glad it helped you bro

[@tabithajackson2184]

Where's the collection-container in the html file?😭😭

[@ahmedmamdouh4452]

+1

[@williamshung7553]

Colletions container WTF!!!

[@hidaiasaidi7234]

please can you send me fil source code i don't know how i can get it

[@tejaspatel3680]

How to make it infinite??

[@aliansari799]

bro where is collection container

[@sayendeepmahanty8141]

Can you send me the js file by making it ts file

[@prosenjeetsarker5262]

What we need for web design just make a video

[@CreativeColabAfrica]

I liked the video up until where you didn't bother to explain where the .collection-container emerged from.😮‍💨

[@dev_ression]

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.

[@CreativeColabAfrica]

@@dev_ression Ok. Checking it out.

[@silencraft2670]

Activa windows porfa

[@dev_ression]

hahaha never

[@benmoraes5511]

5:44

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK SOON;PREPARE

[@Ollala]

it look like u copy past but with typing unless u are so good

[@benmoraes5511]

9:12

[@An-yh2bl]

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.

[@dev_ression]

Strange. When you download the code from GitHub, you’ll find it does in fact work :)

[@An-yh2bl]

@@dev_ression I won’t download anything. Uploading a zip file to github is unnecessary. Poor quality of your work.

[@Sol4rOnYt]

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

[@zickoxgamesaxr3828]

działa

[@sohamghosh461]

No one will ever understand your video

[@dev_ression]

Wrong

[@Chocolita49]

I disagree! It's actually easy to understand if you know what you're doing😊.

[@ianxven]

thanks man

[@dev_ression]

Thanks for watching!