Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chauhan-ankit24/imageslider-swiper
https://github.com/chauhan-ankit24/imageslider-swiper
css html5 swiper-js
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/chauhan-ankit24/imageslider-swiper
- Owner: chauhan-ankit24
- Created: 2024-03-09T20:13:29.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-01T16:12:30.000Z (10 months ago)
- Last Synced: 2024-11-10T16:45:17.742Z (3 months ago)
- Topics: css, html5, swiper-js
- Language: HTML
- Homepage: https://image-slider-swiper.vercel.app
- Size: 18.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsive Image Slider
A simple and responsive image slider implemented with HTML, CSS, and JavaScript using the Swiper.js library.
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Usage](#usage)
- [Installation](#installation)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
## Overview
The Responsive Image Slider is a versatile slider that can showcase a collection of images with associated names, descriptions, and "View More" buttons. It utilizes the Swiper.js library to provide a smooth and responsive sliding experience.
## Features
- Responsive design for various screen sizes.
- Easily customizable for different images, names, and descriptions.
- Navigation buttons (next, previous) for user-friendly interaction.
- "View More" button for each slide, providing an option for additional content.
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/responsive-image-slider.git
```
2. **Navigate to the project directory:**
```bash
cd responsive-image-slider
```
3. **Open the `index.html` file in your preferred web browser to see the slider in action.**
## Customization
Customize the content of the slider by replacing the placeholder names, descriptions, and images in the HTML file. Open the `index.html` file and look for the sections with comments like ``. Replace the existing information with your own, including names, descriptions, and image sources. Additionally, feel free to modify the styling in the `Css/style.css` file to match your project's theme.
## Contributing
Contributions are welcome! If you have suggestions, find a bug, or want to propose a new feature, please open an issue or submit a pull request. Before contributing, make sure to read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).
## License
This project is licensed under the [MIT License](LICENSE). Feel free to use, modify, and distribute the code in accordance with the terms specified in the license.