Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NickPiscitelli/Glider.js
A fast, lightweight, dependency free, native scrolling carousel alternative!
https://github.com/NickPiscitelli/Glider.js
Last synced: 6 days ago
JSON representation
A fast, lightweight, dependency free, native scrolling carousel alternative!
- Host: GitHub
- URL: https://github.com/NickPiscitelli/Glider.js
- Owner: NickPiscitelli
- License: mit
- Created: 2018-10-15T22:43:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-19T05:21:22.000Z (6 months ago)
- Last Synced: 2024-10-29T11:06:20.490Z (12 days ago)
- Language: JavaScript
- Homepage: https://nickpiscitelli.github.io/Glider.js
- Size: 1.35 MB
- Stars: 3,268
- Watchers: 32
- Forks: 297
- Open Issues: 97
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Glider.js
Latest Version: 1.7.8
A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.8kb gzipped!)
Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
##### Quick Start
Include glider.min.css:
```html
or
```
Include Glider.js:
```html
or
```
Example HTML:
```html
1
2
3
4
5
6
```
Glider.js Initialization
```javascript
new Glider(document.querySelector('.glider'));
```
Glider.js Initialization w/ full options:
```javascript
new Glider(document.querySelector('.glider'), {
// `auto` allows automatic responsive
// width calculations
slidesToShow: 'auto',
slidesToScroll: 'auto',
// should have been named `itemMinWidth`
// slides grow to fit the container viewport
// ignored unless `slidesToShow` is set to `auto`
itemWidth: undefined,
// if true, slides wont be resized to fit viewport
// requires `itemWidth` to be set
// * this may cause fractional slides
exactWidth: false,
// speed aggravator - higher is slower
duration: .5,
// dot container element or selector
dots: 'CSS Selector',
// arrow container elements or selector
arrows: {
prev: 'CSS Selector',
// may also pass element directly
next: document.querySelector('CSS Selector')
},
// allow mouse dragging
draggable: false,
// how much to scroll with each mouse delta
dragVelocity: 3.3,
// use any custom easing function
// compatible with most easing plugins
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
// event control
scrollPropagate: false,
eventPropagate: true,
// Force centering slide after scroll event
scrollLock: false,
// how long to wait after scroll event before locking
// if too low, it might interrupt normal scrolling
scrollLockDelay: 150,
// Force centering slide after resize event
resizeLock: true,
// Glider.js breakpoints are mobile-first
responsive: [
{
breakpoint: 900,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
}
]
});
```
Change options:
```javascript
Glider(document.querySelector(element_path)).setOption({
name: value,
...
});
// optionally call refresh
Glider(document.querySelector(element_path)).refresh();
```
Bind event:
```javascript
document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
// `this` is bound to the glider element
// custom data located at `event.detail`
// access to Glider object via `Glider(this)`
...
});
```
Destroy with:
```javascript
Glider(document.querySelector(element_path)).destroy();
```
#### Install using package managers NPM / YARN
```
$ npm install glider-js
```
```
$ yarn add glider-js
```
#### Browser support
Glider.js should run on all modern browsers. Support for older browser can be achieved by polyfilling `document.classList`, `window.requestAnimationFrame`, `Object.assign` and `CustomEvent`
Include `glider-compat.min.js` to load the aforementioned polyfills
#### Native Scrollbars
Most browsers now support the `scrollbar-width` property allowing us to avoid the messy hack below.
**NOTE:** This feature is marked as experimental and may not work in all browsers.
```
.glider-track {
scrollbar-width: none;
}
```
Since Glider.js uses native scrolling, the browser wants to apply the standard scrollbar to the glider. In most cases, this is fine since the scrollbar can be hidden with CSS and Glider.js does so when appropriate. In browsers such as Firefox though, the scrollbars cannot be hidden with CSS and require additional markup to hide.
To hide the scrollbars in Firefox, you'll want to wrap your glider with `
` and apply the following CSS/JS:
```css
@-moz-document url-prefix() {
.glider-track {
margin-bottom: 17px;
}
.glider-wrap {
overflow: hidden;
}
}
```
```javascript
document.addEventListener('glider-loaded', hideFFScrollBars);
document.addEventListener('glider-refresh', hideFFScrollBars);
function hideFFScrollBars(e){
var scrollbarHeight = 17; // Currently 17, may change with updates
if(/firefox/i.test(navigator.userAgent)){
// We only need to appy to desktop. Firefox for mobile uses
// a different rendering engine (WebKit)
if (window.innerWidth > 575){
e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
}
}
}
```
#### Packages using Glider.js :rocket:
- [react-glider](https://www.npmjs.com/package/react-glider) - A react wrapper for Glider.js written in typescript.
#### Dependencies
None :)
#### License
Copyright (c) 2018 Nick Piscitelli
Licensed under the MIT license.
It's all yours.