Vanilla JavaScript: horizontal Smooth Scrolling Parallax Slider

Hi guys,

Back with another video where we will be creating a parallax slider.

We will be using the lerp function to create out own horizontal smooth scrolling effect with JavaScript.

Thanks for watching and please subscribe if you wish to see more videos like this.

Conor

[owfuldev]

My brother, you are so underrated. You have skill that not many developers have. Please keep making videos, I believe more people will discover you, it just takes time. Love your content bro!

[sunriseinthesky]

So cool! I learned a lot about smooth scrolling ! Thanks! Have a good day!

[mariosuper]

Thank you for your Tutorial!! I really enjoyed recreating the end result :) A mobile Version for this type of site would be sooo cool. Meaning, when you scroll on your phone it would be vertical scrolling with the same parallax effect. That would be bonkers!!!! Maybe consider this as a video idea.

[dayana]

Thanks for the tutorial!! From Brazil 🇧🇷

[mdkhaled]

👌 love your content, Make more video like loading screen animation, Thank you

[lawrenceardosa]

gotta like first before watching this awesome content!

[austinejose]

Thanks for the tutorial, Great Content.

[MostafaAhmed-fqnn]

very nice pro I love this effects thinks for teach me this !

[mrSargi]

Absolutely amazing content! Could you please also make this kind of projects on react too ? Would really appreciate it!

[archanacarter]

This is effect is fabulous! Would it be possible to add Intersection Observer?

[godfreyjeremiah]

Thanks, @Conor Bailey for sharing your solution. I have tried to implement this in React js but it isn't working. The part I had issues with is iterating over the directory containing the images and then displaying them. Every other aspect of the code worked but just that part of looping over the image folder. I tried using the import and map function but became a pain in the neck as everything scattered. Any solution to this?

[nigelvidal]

hello! the window.addEventListener('resize', init); didn't work for me, and how do i add small spaces between each images? please help

[anthonywalker]

I like the way this guy says haytchtml

[Gary_Reid_Backing_Tracks]

Thanks! Let's see how my instructor likes this example as opposed to theirs when I hand in my assignment...

[mimitecrazy]

Okay it's really nice but how can i do this in a smaller container, because when i scroll the images scrolls but the page also
And i just want the images to scroll independently

[christoffersrensen]

I did every code and followed your steps, but my images would not show on the screen. It's just a black page. Any suggestions?

[adisukrawan]

Hay Connor.
My name is Dekdi, I am beginner front end programmer from Bali, Indonesia. I am succeeded in making one as the same as your tutorial. But when i applied to my project i got little stuck. I want to make the parallax slider work when it touch my third section not from the begining of my page, it become weird and error. Do you mind let me know which line in your code that i should change and adjust to make it work to the section that i want? Could you give me the example of the code?. I would appreciate it thanks.

[frank_t.]

how to make this effect on slider plugin - owl or slick

[imamuddinkhan]

Thank you for your Tutorial!! Please send source code of this demo

[ahndaekyung]

Hi conor ! Big Hello from France ! A music man who loves development too ! Thank you very much for your videos really i love your way to explain and to do and your work. I need your help if it's possible because i would like to add a drag horizontal function to your slider (in vanilla js of course). Is it possible to do ? Thank you again, i'm blocked about this for a very long time ! (ps sorry for my poor english)