https://github.com/stefano-rainieri/yajs
YET ANOTHER JAVASCRIPT SLIDER ✨ Simple, lightweight, responsive slider carousel.
https://github.com/stefano-rainieri/yajs
browser-support carousel javascript javascript-slider lightweight no-dependencies responsive simple slider slider-carousel yajs
Last synced: 1 day ago
JSON representation
YET ANOTHER JAVASCRIPT SLIDER ✨ Simple, lightweight, responsive slider carousel.
- Host: GitHub
- URL: https://github.com/stefano-rainieri/yajs
- Owner: stefano-rainieri
- License: mit
- Created: 2020-04-18T16:26:08.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T15:28:53.000Z (almost 2 years ago)
- Last Synced: 2025-09-30T21:53:07.944Z (9 months ago)
- Topics: browser-support, carousel, javascript, javascript-slider, lightweight, no-dependencies, responsive, simple, slider, slider-carousel, yajs
- Language: JavaScript
- Homepage:
- Size: 2.31 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
YAJS
YET ANOTHER JAVASCRIPT SLIDER ✨ Simple, lightweight, responsive slider carousel.
Slide your photos, images, cards or whatever you want easier with this library.
###
[](https://github.com/stefano-rainieri/yajs)
## Before
This library has no dependencies.
You only have to include a JS file.
It's built with webpack, so the CSS applied to the elements, is added via the bundled JS.
This CSS is just in order to make the right positioning of the sliding elements.
No other rules will be applied (backgrounds, colors, shadows etc...).
Of course, you can add custom css to inside sliding elements, don't worry.
## Installation
Install Yajs with your favourite package manager:
```sh
$ yarn add @stefano-rainieri/yajs
```
or
```sh
$ npm install @stefano-rainieri/yajs --save
```
Include Yajs into your project, choosing `esm` or `umd` packaging:
```html
```
- `umd` package is es5-written. Compatible with majority of browsers
- `esm` package is es6-written. Compatible with modern browsers.
## Usage
Add Yajs markup to auto-configure the slider carousel for your element:
```html
<
your first element in the slider
your second element in the slider
your third element in the slider
...
your nth element in the slider
>
```
That's all. Enjoy!
## Examples
Try some Yajs examples simply opening `index.html` under `demo/` folder.
## Test
Run Yajs test:
```sh
$ yarn test
```
## Work in progress
- configure autoplay *(now it's fixed on and scroll every 5s)*
- configure autoplay delay *(now no delay is applied)*
- dynamically add style on construction
## Contributing
Contributions are welcome! Feel free to file an [ISSUE](https://github.com/stefano-rainieri/yajs/issues) or open a [PR](https://github.com/stefano-rainieri/yajs/pulls) for this repo.
## License
Yajs is licensed under the MIT License - see the [LICENSE](https://github.com/stefano-rainieri/yajs/blob/master/LICENSE) file for details.
*Free Software, Hell Yeah!*