Installations

npm install glider-js

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.16.1

NPM Version

9.5.1 Score

95.9

Supply Chain

99.6

Quality

76.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

17

Total

78

Closed

15

Merged

46

Issues

Open

79

Total

191

Closed

112

Releases

16

Latest Release

1.7.8

Published on 26 Oct 2022

Latest Release

1.7.6

Published on 07 Mar 2021

Minor bug fixes

1.7.3

Published on 07 May 2020

Stable

1.7.2

Published on 17 Mar 2020

1.7.1

Published on 13 Jul 2019

Latest

1.7.0

Published on 03 Jul 2019

View all 16 releases

Contributors

27

Unable to fetch Contributors

View all 27 contributors

Languages

3

JavaScript

HTML

CSS

JavaScript (67.35%)

HTML (22.89%)

CSS (9.77%)

Developer

NickPiscitelli

Download Statistics

Total Downloads

4,659,075

Last Day

3,397

Last Week

14,864

Last Month

69,340

Last Year

1,146,204

GitHub Statistics

3,295 Stars

243 Commits

298 Forks

32 Watching

10 Branches

27 Contributors

Bundle Size

8.27 kB

Minified

2.92 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

1.7.9

Package Id

glider-js@1.7.9

Unpacked Size

1.55 MB

Size

777.72 kB

File Count

73

NPM Version

9.5.1

Node Version

18.16.1

Publised On

28 Apr 2024

Total Downloads

Cumulative downloads

Total Downloads

4,659,075

Last day

-24.9%

3,397

Compared to previous day

Last week

-23.5%

14,864

Compared to previous week

Last month

10.2%

69,340

Compared to previous month

Last year

-11.6%

1,146,204

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

6

http-server husky lint-staged prettier standard uglify-js

Versions

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:

1<link rel="stylesheet" href="glider.min.css">
2or
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">

Include Glider.js:

1<script src="glider.min.js"></script>
2or
3<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>

Example HTML:

1<div class="glider">
2  <div> 1 </div>
3  <div> 2 </div>
4  <div> 3 </div>
5  <div> 4 </div>
6  <div> 5 </div>
7  <div> 6 </div>
8</div>

Glider.js Initialization

1new Glider(document.querySelector('.glider'));

Glider.js Initialization w/ full options:

1new Glider(document.querySelector('.glider'), {
2
3  // `auto` allows automatic responsive
4  // width calculations
5  slidesToShow: 'auto',
6  slidesToScroll: 'auto',
7
8  // should have been named `itemMinWidth`
9  // slides grow to fit the container viewport
10  // ignored unless `slidesToShow` is set to `auto`
11  itemWidth: undefined,
12
13  // if true, slides wont be resized to fit viewport
14  // requires `itemWidth` to be set
15  // * this may cause fractional slides
16  exactWidth: false,
17
18  // speed aggravator - higher is slower
19  duration: .5,
20
21  // dot container element or selector
22  dots: 'CSS Selector',
23
24  // arrow container elements or selector
25  arrows: {
26    prev: 'CSS Selector',
27    // may also pass element directly
28    next: document.querySelector('CSS Selector')
29  },
30
31  // allow mouse dragging
32  draggable: false,
33  // how much to scroll with each mouse delta
34  dragVelocity: 3.3,
35
36  // use any custom easing function
37  // compatible with most easing plugins
38  easing: function (x, t, b, c, d) {
39    return c*(t/=d)*t + b;
40  },
41
42  // event control
43  scrollPropagate: false,
44  eventPropagate: true,
45
46  // Force centering slide after scroll event
47  scrollLock: false,
48  // how long to wait after scroll event before locking
49  // if too low, it might interrupt normal scrolling
50  scrollLockDelay: 150,
51
52  // Force centering slide after resize event
53  resizeLock: true,
54
55  // Glider.js breakpoints are mobile-first
56  responsive: [
57    {
58      breakpoint: 900,
59      settings: {
60        slidesToShow: 2,
61        slidesToScroll: 2
62      }
63    },
64    {
65      breakpoint: 575,
66      settings: {
67        slidesToShow: 3,
68        slidesToScroll: 3
69      }
70    }
71  ]
72});

Change options:

1Glider(document.querySelector(element_path)).setOption({
2  name: value,
3  ...
4});
5
6// optionally call refresh
7Glider(document.querySelector(element_path)).refresh();

Bind event:

1document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
2  // `this` is bound to the glider element
3  // custom data located at `event.detail`
4  // access to Glider object via `Glider(this)`
5  ...
6});

Destroy with:

1Glider(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 <div class="glider-wrap"> and apply the following CSS/JS:

1@-moz-document url-prefix() {
2  .glider-track {
3    margin-bottom: 17px;
4  }
5  .glider-wrap {
6    overflow: hidden;
7  }
8}

1document.addEventListener('glider-loaded', hideFFScrollBars);
2document.addEventListener('glider-refresh', hideFFScrollBars);
3function hideFFScrollBars(e){
4  var scrollbarHeight = 17; // Currently 17, may change with updates
5  if(/firefox/i.test(navigator.userAgent)){
6    // We only need to appy to desktop. Firefox for mobile uses
7    // a different rendering engine (WebKit)
8    if (window.innerWidth > 575){
9      e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
10    }
11  }
12}

Packages using Glider.js :rocket:

react-glider - A react wrapper for Glider.js written in typescript.

Dependencies

None :)

License

Licensed under the MIT license.

It's all yours.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.4

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to glider-js

glider-js

Installations

Developer Guide

No

CommonJS

18.16.1

9.5.1

Score

Pull Requests

17

78

15

46

Issues

79

191

112

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

8.27 kB

2.92 kB

Maintainers

Package Meta Information

Total Downloads

4,659,075

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

Glider.js

Quick Start

Install using package managers NPM / YARN

Browser support

Native Scrollbars

Packages using Glider.js :rocket:

Dependencies

License

10

10

5

0

0

0

0

0

0

0

2.4

/10