Demo

Check out the live demo: GitHub Pages Demo

Hero Slider

Description

This project features a hero slider with a stylish design that includes animated particles in the background, a smooth image carousel using Swiper.js, and background music. The slider displays various superhero images, including Superman, Wonder Woman, Batman, Flash, and Joker. The user can control the background music using a play/pause button.

Features

• Hero image carousel with superhero-themed slides
• Particles.js background animation
• Play/pause audio control
• Stylish hover effects and smooth transitions
• Responsive design for different screen sizes

Technologies Used

• HTML
• CSS
• JavaScript
• Swiper.js (for the image carousel)
• Particles.js (for background animation)
• Ionicons (for play/pause icons)

Installation

1. Navigate to the project directory:

   cd hero-slider

2. Open index.html in your web browser.

File Structure

hero-slider/
│-- index.html          # Main HTML file
│-- css/
│   ├── style.css       # Stylesheet for the hero slider and animations
│-- js/
│   ├── script.js       # JavaScript for play/pause button, Swiper, and particles.js
│-- assets/
│   ├── Audio/19 Saving the Day_Award Ceremony_End Titles.mp3  # Background music
│   ├── images/         # Superhero images for the Favicon
│   ├── b8d0f4076816c52e2b0e23ca8d3b540d.jpg # 

Usage

1. Extract the ZIP file.
2. Open the index.html file in your browser.
3. Click the play/pause button to control the background music.
4. Use the slider to view different superhero images.
5. The images will transition smoothly with the help of Swiper.js.

Customization

• Modify the style.css file to change the design or adjust the background animations.
• Update the JavaScript in script.js to add or change functionalities.
• Replace the superhero images with your own by updating the image URLs in the HTML file.
• Change the background music by replacing the mp3 file in the assets/Audio/ folder.

License

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

Author

Created by MDJAmin. Check out more projects on GitHub.