https://github.com/robiveli/jscrolly
Simple dependency-free javascript carousel slider plugin
https://github.com/robiveli/jscrolly
carousel javascript lightweight plugin simple slider thumbnail vanilla-js
Last synced: 4 months ago
JSON representation
Simple dependency-free javascript carousel slider plugin
- Host: GitHub
- URL: https://github.com/robiveli/jscrolly
- Owner: robiveli
- Created: 2017-01-27T19:05:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T13:09:18.000Z (almost 3 years ago)
- Last Synced: 2026-01-23T16:14:32.443Z (5 months ago)
- Topics: carousel, javascript, lightweight, plugin, simple, slider, thumbnail, vanilla-js
- Language: JavaScript
- Homepage: https://www.rvdizajn.com/jscrolly/
- Size: 1.14 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jScrolly #
### simple dependency-free javascript carousel slider plugin ###
### Install ###
```
npm install jscrolly
```
### Usage ###
Include script:
```
```
or
```
import jScrolly from 'jScrolly';
```
Include styling for buttons (optionally, style it as you wish):
```
```
or
```
@import 'jScrolly';
```
Initial required structure, place any content you want within the items:
```
```
Finally, initialize jScrolly:
```
var myScroller = new jScrolly();
```
### Demo ###
Demo available [here](https://www.rvdizajn.com/jscrolly/).
### Options ###
jScrolly can take an optional parameters - an object of key/value settings:
- **$transitionSpeed** String *(default:400ms)* - speed of previous and next transitions (in milliseconds)
- **buttonsClass** String *(default:jPanel)* - css class for buttons container
- **buttonPrevClass** String *(default:prevBtn)* - css class for previos button
- **buttonNextClass** String *(default:nextBtn)* - css class for next button
- **buttonNeactiveClass** String *(default:neactive)* - css class for neactive button
- **buttonPrevText** String *(default:Previous)* - text for for previos button
- **buttonNextText** String *(default:Next)* - text for for next button
- **onFirstSlide** Function *(default:null)* - runs only once on first slide change
- **onSlide** Function *(default:null)* - runs at slide change
**Example**
```
var myScroller = new jScrolly({
onFirstSlide: function() {
console.log('On first slide change');
},
onSlide: function() {
console.log('On every slide change');
}
});
```
Default css settings are placed in `/sass/library/_variables.scss`:
- **$baseColor** *(default:#3A3A3A)* - main color for buttons
- **$btnSize** *(default:60)* - size of buttons in rem unit
### API ###
`moveNext()` - slide to next slide
`movePrev()` - slide to prev slide
`destroy()` - destroys the current instance of jScrolly
### Browser support ###
It works in every modern browser where [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) is supported.
Consider using polyfill [classList](https://github.com/eligrey/classList.js/) feature if needed.
### License ###
jScrolly is licensed under the [MIT license](http://opensource.org/licenses/MIT).