https://github.com/aviralsharma07/image-gallery

https://github.com/aviralsharma07/image-gallery

Last synced: 29 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/aviralsharma07/image-gallery
• Owner: aviralsharma07
• Created: 2024-03-31T17:07:09.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-31T17:39:32.000Z (10 months ago)
• Last Synced: 2024-03-31T18:23:08.329Z (10 months ago)
• Language: HTML
• Homepage: https://aviralsharma07.github.io/image-gallery/
• Size: 2.31 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Image Gallery

In this Project, I learned:

1. Mouse Scrolling Behaviour:

   ```js

   scrollContainer.addEventListener("wheel", (eve) => {

     eve.preventDefault();

     scrollContainer.scrollLeft += eve.deltaY;

     scrollContainer.style.scrollBehavior = "auto";

   });

   ```

2. Scroll Button Functionality:

   ```js

   backbtn.addEventListener("click", () => {

     scrollContainer.style.scrollBehavior = "smooth";

     scrollContainer.scrollLeft -= 900;

   });

   nextbtn.addEventListener("click", () => {

     scrollContainer.style.scrollBehavior = "smooth";

     scrollContainer.scrollLeft += 900;

   });

   ```

3. ScrollBar Styling:

   ```js

   .gallery::-webkit-scrollbar {

     display: none;

   }

   // overflow-x: scroll; [This is done in .gallery selector]

   ```