Project Overview: This is a frontend-only Dynamic Image Slider built using HTML, CSS, and JavaScript. It allows users to view a rotating set of images with smooth transitions and optional navigation controls. The slider is lightweight, responsive, and ideal for portfolios, galleries, or landing pages. Images are loaded dynamically from a JSON file for easy customization. Features: • Load images dynamically from images.json • Auto-slide with configurable interval • Manual navigation (Next/Previous buttons) • Responsive design for all screen sizes • Lightweight and easy to deploy
Folder Structure: dynamic-image-slider/ ├── index.html — Main page with image slider ├── script.js — JavaScript logic for slider functionality ├── style.css — Styling for slider layout and transitions ├── images/ — Folder containing image files │ ├── img1.jpg │ ├── img2.jpg │ └── ... ├── images.json — JSON file listing image paths
Project Description The Dynamic Image Slider is a responsive web project designed to display a series of images in an interactive carousel format. Built using HTML, CSS, and JavaScript, it features smooth slide transitions and intuitive navigation through previous and next buttons. The layout adapts to various screen sizes, making it suitable for both desktop and mobile viewing. Images are loaded from a dedicated folder and referenced directly in the HTML, ensuring fast rendering and easy customization. This project is ideal for showcasing portfolios, product galleries, or team profiles, and can be deployed seamlessly to platforms like Vercel for live access.