🌙 Dark Nature Gallery

A stunning, fully-featured image slider/gallery built with vanilla JavaScript, HTML, and CSS. This elegant photo gallery showcases dark nature photography with smooth transitions, auto-play functionality, and a modern dark-themed interface.

✨ Features

Core Functionality

• 🖼️ Image Slider - Smooth sliding transitions between images
• ⏭️ Navigation Controls - Previous/Next buttons with elegant styling
• 🔘 Dot Indicators - Interactive dots for direct slide navigation
• ⚡ Auto-Play - Automatic slide rotation every 5 seconds
• ⏸️ Hover Pause - Auto-play pauses when hovering over images
• 🔄 Infinite Loop - Seamlessly loops from last to first image
• 📱 Responsive Design - Adapts to different screen sizes

Advanced Features

• 🖥️ Fullscreen Mode - Toggle fullscreen for immersive viewing
• 🎨 Dark Theme - Elegant dark mode design with subtle patterns
• 💫 Smooth Animations - Cubic-bezier transitions for professional feel
• 🎯 Backdrop Blur - Modern glassmorphism effects on controls
• ✨ Hover Effects - Interactive feedback on all clickable elements

🚀 Demo

The gallery features 5 stunning dark nature photographs from Pixabay, including:

• Mysterious forest scenes
• Mountain landscapes
• Dramatic fields
• Atmospheric roads
• Silhouetted trees

🛠️ Tech Stack

• HTML5 - Semantic markup structure
• CSS3 - Advanced styling with modern features:
  • Flexbox layout
  • CSS transforms and transitions
  • Backdrop filters (glassmorphism)
  • Custom SVG patterns
  • Responsive design
• JavaScript (ES6) - Interactive functionality:
  • DOM manipulation
  • Event handling
  • Timer management
  • Dynamic element creation

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd "Image Slider"

2. Open in browser Simply open index.html in your web browser:

   # Windows
   start index.html
   
   # macOS
   open index.html
   
   # Linux
   xdg-open index.html

   Or use a local development server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js (if http-server is installed)
   npx http-server

3. Access the gallery Navigate to http://localhost:8000 (if using a local server)

📁 Project Structure

Image Slider/
│
├── index.html          # Main HTML structure
├── style.css           # Styling and animations
├── script.js           # Interactive functionality
└── README.md           # Project documentation

🎮 Usage

Basic Controls

1. Next/Previous Buttons

   • Click the Next button (right arrow) to advance
   • Click the Prev button (left arrow) to go back

2. Dot Navigation

   • Click any dot at the bottom to jump to that specific image

3. Fullscreen Mode

   • Click the ⛶ button (top-right) to enter fullscreen
   • Click the ⤢ button to exit fullscreen

4. Auto-Play

   • Images automatically advance every 5 seconds
   • Hover over the slider to pause auto-play
   • Move mouse away to resume auto-play

Keyboard Support

While basic keyboard navigation is not yet implemented, you can easily extend the functionality by adding keyboard event listeners.

🎨 Customization

Change Images

Edit the index.html file and replace the image URLs:

<div class="slider-images">
    <img src="YOUR_IMAGE_URL_1" alt="Image 1">
    <img src="YOUR_IMAGE_URL_2" alt="Image 2">
    <!-- Add more images as needed -->
</div>

Adjust Auto-Play Speed

In script.js, modify the interval value (in milliseconds):

function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 5000); // Change 5000 to desired ms
}

Modify Slider Dimensions

In style.css, adjust the container size:

.slider-container {
    width: 800px;  /* Change width */
    height: 450px; /* Change height */
}

Change Color Scheme

Modify the color variables in style.css:

body {
    background-color: #121212; /* Main background */
}

.slider-container {
    border: 2px solid #333; /* Border color */
    background-color: #1a1a1a; /* Container background */
}

🌟 Key Features Explained

Smooth Transitions

Uses CSS cubic-bezier timing functions for professional, smooth animations:

transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);

Glassmorphism Effects

Modern frosted-glass effect on buttons using backdrop-filter:

backdrop-filter: blur(5px);

Responsive Slider Width

JavaScript dynamically calculates slider width on window resize:

window.addEventListener('resize', () => {
    goToSlide(currentIndex);
});

Smart Timer Management

Auto-play timer resets when user interacts with the slider, providing a better user experience.

🔧 Browser Compatibility

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Opera (latest)

Note: Backdrop-filter may have limited support in older browsers.

📱 Responsive Design

The gallery is designed to work on various screen sizes. For optimal mobile experience, consider adding these viewport adjustments:

@media (max-width: 768px) {
    .slider-container {
        width: 100%;
        height: 300px;
    }
}

🚀 Future Enhancements

Potential features to add:

• ⌨️ Keyboard navigation (arrow keys)
• 👆 Touch/swipe gestures for mobile
• 🎬 Lazy loading for better performance
• 🔍 Image zoom functionality
• 📸 Thumbnail preview strip
• 🎵 Optional background music
• 💾 Save favorite images
• 🔗 Social sharing buttons

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👤 Author

Created with ❤️ as part of an internship project.

🙏 Acknowledgments

• Images sourced from Pixabay
• Font: Montserrat by Google Fonts
• SVG pattern inspired by Hero Patterns

📞 Support

If you have any questions or run into issues, please open an issue in the repository.

---

⭐ If you find this project useful, please consider giving it a star!