Responsive Image Slider | HTML, CSS & JavaScript (Draggable Slider Vanilla JS)

Thanks for watching!

[codegrid]

I ran out of time to add voiceover this time. My primary goal is to keep the video schedule since adding voiceover takes too much time and I only have 2 days to finish the video. But I'll make an effort to include it in as many videos as I can. Thanks ❤️

[marinosinbad]

I really love this vanilla videos without libraries! Please continue uploading them! It really helps to understand the bases how to do it instead of using a library to achieve it. Then we can use gsap or other library to speed the process, but as learning it's fire 🤙

[julianvelez]

Nice work bro excellent content bro ❤❤❤❤

[m.art.a]

Hrm, I don't get that `this.scale = lerp(this.scale, this.speed, 0.1)` code line.
Do we use `this.scale` anywhere, what I am missing?
Also, `this.scale` is `NaN` ...?

Anyway, amazing VanillaJS tutorial and I am deeply grateful for it! 🙏
I definitely need to study the `lerp(f0, f1, t)` functionality more.

PS. pardon my English

[arrvac]

Little mistake at 5:46.

It's not:
(this.wrapWidth = this.items[0].clientWidth * this), items.length;
but:
this.wrapWidth = this.items[0].clientWidth * this.items.length;

Great video !

[mirjalol_shamsiddinov]

ok bro we got u. thanks anyway at least there is a code. Next time can u teach, any smooth parallax effect

[ailofimaster]

can you give your extensions that you use to theme your editor? @codegrid

[oct-zthk]

This is not working bro can you make this same effect with gsap ?

[imtseku]

i copied every single lines and it's not working at the end error appeared on calculate() area / i'm not developer

[thierryntoh]

Fix: Replace
=> (this.wrapWidth = this.items[0].clientWidth * this), this.items.length;
with
=> this.wrapWidth = this.items[0].clientWidth * this.items.length;