How To Create Image Gallery In JavaScript | Horizontal Scrolling Using JavaScript

Guys if you find ur js script dont work, juts replace all the (container) in ScrollContainer. Replace the Container with Bar, like this Scrollbar. Thats all

Guys if your scroll behaviour isnt working its cause it should be behavior amrican eng

The java script disnt work at all intwrnal and external

Well explained sir😇😇

hi can you please help me with the scroll bahvciour on click its not working

Thank you sir... ❤❤

This is very helpful sir❤❤❤

what I can say is thank you so much for your videos, you are a great teacher.
🤩🤩🤩

I cant get my buttons to work can anyone help

1)i don't know but this code ain't working for me, perhaps the source code can help but for some reason it's no where to be found...
2) The prevent default is not preventing the default scroll behaivour don't know why

Thank you sooo much 😊, your video helped me alot.
Thanks again 😊

Hello. In my case, don't work 'deltaY' and 'scrollBehavior'. Why? If anyone knows the answer, it would mean a lot to me. Thank you.

Can you please make a video on all event listeners that are useful for these type of mini projects

The only real issue I had after watching this video was that my JavaScript didn't work. Otherwise, simple and awesome!

Friend, a question
How can I add more images?
It only allows me to add 6
When I add more images it deforms

thanks but I want to scroll down, what should I do

Thank you very much :D

is it responsive?? damn why guyz never give media query

Hats off to you

Hi, thanks for showing us on how to apply these effects using javascript. Just to add something to your coding if you wanted to make the gallery "automatically scroll" to the next 3 images, you can try adding conditional and comparing your "evt.deltaY" whether it receives "negative value (left scroll)" or "positive value (right scroll)";


scrollCont.addEventListener("wheel", (evt) => {
scrollCont.style.scrollBehavior = 'smooth';
evt.preventDefault();
if(evt.deltaY < 0) {
scrollCont.scrollLeft = (Math.floor(scrollCont.scrollLeft/900)*900)-900;
} else if (evt.deltaY > 0) {
scrollCont.scrollLeft = (Math.floor(scrollCont.scrollLeft/900)*900) + 900;
}
});

nextBtn.addEventListener("click", () => {
scrollCont.style.scrollBehavior = 'smooth';
scrollCont.scrollLeft += 900;
});
backBtn.addEventListener("click", () => {
scrollCont.style.scrollBehavior = 'smooth';
scrollCont.scrollLeft -= 900;
});

______________________________________________________________________
// ofcourse if you wanted to make the "scrolling effect" to maintain its position, its possible but the bug is when you scroll and the position remains in between the interval of 0-900, the back/next button doesnt automate to the perfect position of the previous/next 3 images. So in order to rectify this, you can add conditional for both nextBtn and backBtn's "click" event listener:


scrollCont.addEventListener("wheel", (evt) => {
scrollCont.style.scrollBehavior = 'smooth';
evt.preventDefault();
scrollCont.scrollLeft += evt.deltaY;
});

nextBtn.addEventListener("click", () => {
scrollCont.style.scrollBehavior = 'smooth';
scrollCont.scrollLeft += 900;
if (scrollCont.scrollLeft % 900 !== 0) {
scrollCont.scrollLeft = (Math.floor(scrollCont.scrollLeft/900)*900) + 900;
}
});
backBtn.addEventListener("click", () => {
scrollCont.style.scrollBehavior = 'smooth';
scrollCont.scrollLeft -= 900;
if (scrollCont.scrollLeft % 900 !== 0) {
scrollCont.scrollLeft = (Math.floor(scrollCont.scrollLeft/900 )*900);
}
});

//what it does is that it reads the remainder if the button you click will have any remain values after divided with 900. If it does, it will automate to the perfect position of the previous/next 3 images. Hope this helps!

When I external the JS, the side-scrollbar does not behave as internal JS.

Hi, thank you ! I was trying it but the back btn was not working because I written : "scrollContainer.scrollLeft += 900" instead of -900 hahaha

Thanks for share it works very well

where is source code file? even i subscribed this

As always 100% on point 👌

For some reason scrolling right/forward isn't working in my code, anyone else found this problem?/know how it might be helped?

Sir, I found this tutorial useful. Thanks!

Sir i tried many time...but scrollBehavior doesn't work. Why it doesn't work?

Hi There, Thanks for this amazing tutorial!
Can you please tell me the reason of placing img tag inside span tag and how it is helpful ?

plx solve this if i use 9 image 0r 12 its just work 6 image not 9 or 12

if i used nine image it just show just six baki sab nahi ata hai click karne ke bat vi

Can you tell me how to make free png images ???

Dark theme i use after watching one of your videos. But if I refresh the page, it comes back to the previous theme. What is the solution?

Sir, please create a slider without using swiper js.... please create a slider using html,css and JavaScript. Please don't use any plugin. Please sir, please 🙏

Hey, brother, can you make Anime websites?

I wrote an investment template using html, css and js but I don't know how to connect the admin so that it controls the user interface

this javascript failed to work in my external file

Great job

I like the visual theme of your code editor, very eye-catching, what’s the name?

Simple and cool ! Thanks for helpful video.

And how can I make this responsive in mobile device If I use absolute values for the width of container just like you?
Maybe change the grid column template?

Nice! is this gonna be responsive and working on phones?

Nice sir ,

Hey. I had a question. Could you please tell me how to upload an image in a website and then display the uploaded image in a separate website? Would be really helpful, Thank you

Thank you I love JAVASCRIPT!!!!

I make projects using HTML, CSS and JavaScript (with code, for beginners).💻