Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zkreations/sheetslider
A pure CSS slider with no dependencies. Designed to be as lightweight and fast as possible. Compresses to just 1kb (Brotli).
https://github.com/zkreations/sheetslider
no-dependencies nojs pure-css responsive sass scss slider slider-image
Last synced: 2 months ago
JSON representation
A pure CSS slider with no dependencies. Designed to be as lightweight and fast as possible. Compresses to just 1kb (Brotli).
- Host: GitHub
- URL: https://github.com/zkreations/sheetslider
- Owner: zkreations
- License: mit
- Created: 2016-05-09T23:39:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-05T23:37:32.000Z (10 months ago)
- Last Synced: 2024-10-11T04:38:32.440Z (3 months ago)
- Topics: no-dependencies, nojs, pure-css, responsive, sass, scss, slider, slider-image
- Language: SCSS
- Homepage: http://zkreations.github.io/SheetSlider/
- Size: 3.85 MB
- Stars: 23
- Watchers: 4
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# SheetSlider
A pure CSS slider with no dependencies. Designed to be as lightweight and fast as possible.
## Features
- Pure and modern CSS
- No dependencies
- Lightweight (minified ~ 1kb with [Brotli](https://www.multiutil.com/text-to-brotli-compress/))
- Fast and smooth
- Responsive (intrinsic ratio)
- Customizable with CSS and Sass variables
- Easy to use
- Multiple sliders on the same page
- Open source
## Install
### npm
```bash
npm install sheet-slider
```
### CDN
```html
```
## How to use
The slider only needs a basic HTML structure to work:
```html
```
All content inside the `sheet-item` elements will be the ones that move. They don't necessarily have to be images, they can be any HTML element.
The slider also has two optional elements, which are the navigation buttons and the descriptive texts. If you include them, the structure would look like this:
```html
```
**Note:** The `for` attribute of the labels must match the `id` of the inputs. For multiple sliders on the same page, the `name` attribute of the inputs must be different, and the `for` attribute of the labels must match the `id` of the inputs of the slider to which they belong.
## Customize
Define new values for the variables in your CSS file or in the `:root` selector.
| Variable | Description
| ----------------------- | -------------
| `--sheet-accent` | Accent color
| `--sheet-ratio` | Aspect ratio
| `--sheet-space` | Space of the elements
| `--sheet-arrow-size` | Size of the arrows
| `--sheet-duration` | Animation duration
| `--sheet-dot-size` | Size of the dots
| `--sheet-timing` | Animation timing function
| `--sheet-text-color` | Text color
| `--sheet-text-shadow` | Text shadow
| `--sheet-title-size` | Title font size
| `--sheet-text-size` | Text font size
| `--sheet-arrow-padding` | Padding of the arrows
| `--sheet-arrow-bg` | BG color of the arrows
| `--sheet-arrow` | SVG of the arrows
| `--sheet-dot-gap` | Space between the dots
| `--sheet-dot-bg` | BG color of the dots
| `--sheet-dot-hover` | BG color of the dots when hover
You can also modify the values in the `_variables.scss` file and compile it with Sass.
## Options
You can choose between two animation modes: `fade` and `vertical`. By default, the animation mode is `horizontal`. If you want to change it, you just have to add the corresponding class to the main container:
```html
...
```
```html
...
```
## Supporting
If you want to help me keep this and more related projects always up to date, you can [buy me a coffee](https://ko-fi.com/zkreations) ☕. I will be very grateful 👏.
## License
**Sheet Slider** is licensed under the MIT License