Instagram-like Image Slider

This project demonstrates how to create a responsive, Instagram-like image slider using HTML, CSS, and JavaScript. The slider features autoplay, navigation controls, dot indicators, swipe gesture support for mobile, and hover effects for an interactive user experience.

🎥 Demo

Check out the full project explanation on my YouTube channel and learn how to build this step-by-step.

🚀 Features

• Autoplay: Automatically transitions between images every few seconds.
• Navigation Controls: "Next" and "Previous" buttons to manually navigate between images.
• Dot Indicators: Visual indicators for the current image.
• Hover Effects: Zoom effect on hover.
• Mobile-Friendly: Swipe gestures for touch devices.
• Responsive Design: Scales smoothly across different screen sizes.

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)

🎥 Demo

Check out the full project explanation on my YouTube channel and see how you can build this from scratch.

🚩 How to Use

1. Clone the repository:

   git clone https://github.com/LimitlessProgrammer/instagram-like-slider.git

2. Open the index.html file in your web browser or run a live server.

📂 Project Structure

instagram-like-slider/
│
├── image/
│   ├── img1.jpeg
│   ├── img2.jpeg
│   └── ...
│
├── styles.css
├── script.js
└── index.html

💡 How It Works

• HTML: Structure of the carousel and images.
• CSS: Styling for responsiveness, hover effects, and layout.
• JavaScript: Implements autoplay, manual navigation, swipe gesture, and keyboard navigation functionalities.

🌟 Screenshots