Wonders of the World - Responsive Image Carousel

A clean, responsive image carousel built to showcase the 7 Wonders of the World. The carousel features smooth transitions, manual navigation, and structured content for each image including title, description, and a "Read More" button.

Table of Contents

• Demo
• Features
• Screenshots
• Technologies Used
• Project Structure
• How to Run
• Future Improvements
• Author

Demo

Currently hosted via GitHub Pages: https://adithi-sreenath.github.io/responsive_image_carousel/

Features

• Fully responsive design that adapts to any screen size
• Manual navigation using previous/next buttons
• Smooth slide transition animations
• Each slide includes:
  • Title of the wonder
  • Description with historical details
  • Optional "Read More" button for extended content
• Lightweight and minimal JavaScript for smooth performance

Screenshots

 

 

Technologies Used

• HTML5 - Semantic markup
• CSS3 - Flexbox layout, transitions, responsive styling
• JavaScript - DOM manipulation for carousel navigation
• Ionicons - For navigation arrow icons

Project Structure

responsive_image_carousel/
│
├── index.html              # Main HTML file for GitHub Pages
├── README.md               # Project documentation
│
├── css/
│   └── image.css           # Styles for carousel and content
│
├── js/
│   └── image.js            # JavaScript for navigation logic
│
└── images/
    ├── great_wall.jpeg
    ├── taj.jpg
    ├── christ_redeemer.jpg
    ├── machu_picchu.webp
    ├── colosseum.jpg
    └── petra.jpg

How to Run

Run Locally

1. Clone the repository:

   git clone https://github.com/adithi-sreenath/responsive_image_carousel.git
   

Future Improvements

• Add autoplay functionality with adjustable speed
• Include pagination dots for easier navigation
• Improve accessibility, e.g., keyboard navigation and ARIA labels
• Enhance Read More functionality to expand content dynamically

Author

Adithi Sreenath