The Full-width Image Slider with Soft Progress Indicator is a responsive image slider that cycles through images with a smooth transition effect. The progress bar indicates the time each slide stays on the screen, making it ideal for modern websites looking for a visually appealing and lightweight slider.
To quickly start using the slider, you can clone the repository and include the HTML, CSS, and JavaScript files in your project.
- Full-width Image Slider with Soft Progress Indicator
- Quickstart/Demo
- Table of Contents
- Installation
- Usage
- Development
- Contribute
- License
To install and integrate the slider into your project:
- Clone the repository:
gh repo clone iammunendrasingh/Full-width-Image-Slider-with-Soft-progress-
Place your images in the slider section and update the paths in the
index.htmlfile. -
Link the
styles.cssandscript.jsfiles in your project.
To use the Full-width Image Slider with Soft Progress Indicator, follow these steps:
Add the provided HTML structure for the slider to your webpage.
Customize the progress duration or other styles by editing the styles.css and script.js files.
For developers looking to modify or extend the functionality of this slider:
- Clone the repository:
git clone https://github.com/iammunendrasingh/Full-width-Image-Slider-with-Soft-progress.git- Customize the project:
- Modify the slide interval by adjusting the slideInterval variable in the
script.jsfile. - Customize the progress bar or slider's appearance by editing the
styles.cssfile.
- Test your changes in a local environment by opening the
index.htmlfile in a browser or using a local server like XAMPP.
Contributions are welcome! You can contribute by:
- Opening issues if you encounter bugs or have feature requests.
- Forking the repository, making changes, and submitting a pull request.
This project is licensed under the MIT License.