-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
eadc021
commit 23edc61
Showing
3 changed files
with
143 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2024 Mohamed Farahat | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| # Slider Component | ||
|
|
||
| A simple HTML/CSS slider component for showcasing content in a visually appealing manner. | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| - [Demo](#demo) | ||
| - [Features](#features) | ||
| - [Usage](#usage) | ||
| - [Customization](#customization) | ||
| - [License](#license) | ||
|
|
||
| ## Demo | ||
| <div align="center"> | ||
| <video controls> | ||
| <source src="./demo.mp4" type="video/mp4"> | ||
| Your browser does not support the video tag. | ||
| </video> | ||
| </div> | ||
|
|
||
|
|
||
| > Or, you can explore the live demo of this component [here](#). | ||
| ## Features | ||
|
|
||
| - Smooth transitions between slides | ||
| - Easy to integrate into existing projects | ||
| - Customizable navigation buttons | ||
|
|
||
| ## Usage | ||
|
|
||
| To use this slider component in your project, follow these steps: | ||
|
|
||
| 1. Clone or download this repository. | ||
| 2. Include the `style.css` file in the `<head>` section of your HTML file: | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" href="path/to/style.css"> | ||
| ``` | ||
|
|
||
| 3. Copy the HTML structure of the slider component into your HTML file: | ||
|
|
||
| ```html | ||
| <!-- Slider Parent --> | ||
| <div class="slider"> | ||
| <!-- Navigation Buttons --> | ||
| <input type="radio" name="slider" title="slider1" checked="checked" class="nav"> | ||
| <input type="radio" name="slider" title="slider2" class="nav"> | ||
| <input type="radio" name="slider" title="slider3" class="nav"> | ||
| <input type="radio" name="slider" title="slider4" class="nav"> | ||
|
|
||
| <!-- Inner Content parent --> | ||
| <div class="inner"> | ||
| <!-- Slide 01 --> | ||
| <div class="contents"> | ||
| <!-- Slide content goes here --> | ||
| </div> | ||
| <!-- End Of Slide 01 --> | ||
|
|
||
| <!-- Slide 02 --> | ||
| <div class="contents"> | ||
| <!-- Slide content goes here --> | ||
| </div> | ||
| <!-- End Of Slide 02 --> | ||
|
|
||
| <!-- Slide 03 --> | ||
| <div class="contents"> | ||
| <!-- Slide content goes here --> | ||
| </div> | ||
| <!-- End Of Slide 03 --> | ||
|
|
||
| <!-- Slide 04 --> | ||
| <div class="contents"> | ||
| <!-- Slide content goes here --> | ||
| </div> | ||
| <!-- End Of Slide 04 --> | ||
| </div> | ||
| <!-- End Of Inner Content parent --> | ||
| </div> | ||
| <!-- End Of Slider Parent --> | ||
| ``` | ||
|
|
||
| 4. Customize the content of each slide as per your requirement. | ||
|
|
||
| ## Customization | ||
|
|
||
| You can customize the appearance of the slider component by modifying the CSS in the `style.css` file. Here are some key customization options: | ||
|
|
||
| - Adjusting the dimensions of the slider: | ||
| ```css | ||
| .slider { | ||
| width: 350px; | ||
| height: 400px; | ||
| } | ||
| ``` | ||
|
|
||
| - Changing the background color: | ||
| ```css | ||
| .slider { | ||
| background-color: aliceblue; | ||
| } | ||
| ``` | ||
|
|
||
| - Styling the navigation buttons: | ||
| ```css | ||
| .nav { | ||
| /* Customize button styles here */ | ||
| } | ||
| ``` | ||
|
|
||
| - Modifying the slide content styles: | ||
| ```css | ||
| .contents { | ||
| /* Customize slide content styles here */ | ||
| } | ||
| ``` | ||
|
|
||
| Feel free to explore and experiment with the CSS to achieve the desired look and feel for your slider component. | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the [MIT License](LICENSE). |