https://github.com/bitstarr/kind-slider
A web component to have a kind, CSS driven image or element slider
https://github.com/bitstarr/kind-slider
no-dependencies slider webcomponent
Last synced: about 1 month ago
JSON representation
A web component to have a kind, CSS driven image or element slider
- Host: GitHub
- URL: https://github.com/bitstarr/kind-slider
- Owner: bitstarr
- License: mit
- Created: 2024-02-02T12:58:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-02T15:29:19.000Z (about 1 year ago)
- Last Synced: 2025-02-01T20:09:33.119Z (3 months ago)
- Topics: no-dependencies, slider, webcomponent
- Language: HTML
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# ``
A web component to have a kind, CSS driven image or element slider. The CSS technique for aligning with the content wrapping is based on the [case study from Smashing Magazine](https://www.smashingmagazine.com/2023/12/css-scroll-snapping-aligned-global-page-layout-case-study/).
The only thing we need JavaScript for, are the optinal buttons to scroll the slider left and right. The component will create these for you, but you can also provide their markup by your self.
This is not 100% out-of-the-box ready, since you might want to alter the CSS to fit to your enviroment.
[Check out the Demo](https://bitstarr.github.io/kind-slider/demo.html)
## Usage
```html
[…]
```
If you dont need controls, you can omit the `controls` and `label-` attributes. In case you make use of the component created controls, please provide the `label-next` and `label-prev` attributes. They will be set as `aria-label` for the buttons and provide screenreaders a readable label.
### Custom controls
```html
[…]
```
Make sure to set the `controls` attribute for the component and `data-direction` for the buttons. I recommend using the `hidden` attribute for the component to take care for the case of faulty or disabled JavaScript. The component will remove the `hidden` attribute when it initializes.
## About Styling
On desktop systems you are likely to see the scrollbar all the time. If you feel uncomfortable with the way this looks, consider adding a background to the whole slider area to incorporate it optically.
Since this components functionality relies heavily on the CSS you really should read that Smashing Magazin article. The CSS might not fit out of teh box to your project, so please don't hesitate to copy the CSS file to your code base and modify it to your requirements. Especially the wrapping width and body padding (look out for media queries) are very individual.