Image Gallery with Horizontal Scroll

A simple, responsive image gallery that allows users to scroll horizontally through a collection of images using buttons or the mouse wheel. Smooth scrolling ensures an engaging user experience.

---

Features

• Horizontal Scrolling:
  Scroll through the images using either the mouse wheel or navigation buttons.

• Smooth Scrolling with Buttons:
  The Next and Back buttons enable smooth scrolling by fixed increments.

• Responsive Design:
  The gallery adapts to various screen sizes, making it accessible on different devices.

---

Demo

https://sudhanshu-ranjan-patra.github.io/Gallary/

---

Installation

1. Clone this repository:

   git clone https://github.com/your-username/image-gallery.git

2. Navigate to the project directory:

   cd image-gallery

3. Open index.html in a browser to view the gallery.

---

Project Structure

|-- index.html         # Main HTML file
|-- style.css          # CSS file for styling the gallery
|-- images/            # Folder containing images and button icons
|-- README.md          # Project documentation

---

Usage

• Scroll with Mouse Wheel:
  Use the mouse wheel to navigate horizontally through the images.

• Use Navigation Buttons:
  Click on the Back and Next buttons to scroll left or right by a fixed amount (600px).

---

Code Overview

JavaScript Functionality

The JavaScript code handles scrolling via mouse wheel and button clicks:

• Mouse Wheel Scroll:
  The gallery scrolls horizontally when the user moves the mouse wheel up or down.

• Button Click Scroll:
  Clicking the Back or Next button scrolls the gallery smoothly by 600px.

---

Screenshots

Initial View

Navigation Buttons

---

Technologies Used

• HTML5 for structuring the gallery.
• CSS3 for styling and layout.
• JavaScript for adding interactive functionality.

---

Future Enhancements

• Add captions for images.
• Implement an autoplay feature for the gallery.
• Add a zoom-in effect when hovering over images.

---