cf7-grid-layout / assets / glider-js / README.md

README.md in Smart Grid-Layout Design for Contact Form 7 4.11, at assets/glider-js/README.md

214 lines 5.0 KB

Raw Download Zip

1	# Glider.js
2
3	A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.8kb gzipped!)
4
5	Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
6
7	##### Quick Start
8
9	Include glider.min.css:
10
11	```html
12	<link rel="stylesheet" href="glider.min.css">
13	or
14	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
15	```
16
17	Include Glider.js:
18
19	```html
20	<script src="glider.min.js"></script>
21	or
22	<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
23	```
24
25	Example HTML:
26
27	```html
28	<div class="glider">
29	<div> 1 </div>
30	<div> 2 </div>
31	<div> 3 </div>
32	<div> 4 </div>
33	<div> 5 </div>
34	<div> 6 </div>
35	</div>
36	```
37
38	Glider.js Initialization
39
40	```javascript
41	new Glider(document.querySelector('.glider'));
42	```
43
44	Glider.js Initialization w/ full options:
45
46	```javascript
47	new Glider(document.querySelector('.glider'), {
48
49	// `auto` allows automatic responsive
50	// width calculations
51	slidesToShow: 'auto',
52	slidesToScroll: 'auto',
53
54	// should have been named `itemMinWidth`
55	// slides grow to fit the container viewport
56	// ignored unless `slidesToShow` is set to `auto`
57	itemWidth: undefined,
58
59	// if true, slides wont be resized to fit viewport
60	// requires `itemWidth` to be set
61	// * this may cause fractional slides
62	exactWidth: false,
63
64	// speed aggravator - higher is slower
65	duration: .5,
66
67	// dot container element or selector
68	dots: 'CSS Selector',
69
70	// arrow container elements or selector
71	arrows: {
72	prev: 'CSS Selector',
73	// may also pass element directly
74	next: document.querySelector('CSS Selector')
75	},
76
77	// allow mouse dragging
78	draggable: false,
79	// how much to scroll with each mouse delta
80	dragVelocity: 3.3,
81
82	// use any custom easing function
83	// compatible with most easing plugins
84	easing: function (x, t, b, c, d) {
85	return c(t/=d)t + b;
86	},
87
88	// event control
89	scrollPropagate: false,
90	eventPropagate: true,
91
92	// Force centering slide after scroll event
93	scrollLock: false,
94	// how long to wait after scroll event before locking
95	// if too low, it might interrupt normal scrolling
96	scrollLockDelay: 150,
97
98	// Force centering slide after resize event
99	resizeLock: true,
100
101	// Glider.js breakpoints are mobile-first
102	responsive: [
103	{
104	breakpoint: 900,
105	settings: {
106	slidesToShow: 2,
107	slidesToScroll: 2
108	}
109	},
110	{
111	breakpoint: 575,
112	settings: {
113	slidesToShow: 3,
114	slidesToScroll: 3
115	}
116	}
117	]
118	});
119	```
120
121	Change options:
122
123	```javascript
124	Glider(document.querySelector(element_path)).setOption({
125	name: value,
126	...
127	});
128
129	// optionally call refresh
130	Glider(document.querySelector(element_path)).refresh();
131	```
132
133	Bind event:
134
135	```javascript
136	document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
137	// `this` is bound to the glider element
138	// custom data located at `event.detail`
139	// access to Glider object via `Glider(this)`
140	...
141	});
142	```
143
144	Destroy with:
145
146	```javascript
147	Glider(document.querySelector(element_path)).destroy();
148	```
149
150	#### Browser support
151
152	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`
153
154	Include `glider-compat.min.js` to load the aforementioned polyfills
155
156	#### Native Scrollbars
157
158	Most browsers now support the `scrollbar-width` property allowing us to avoid the messy hack below.
159
160	NOTE: This feature is marked as experimental and may not work in all browsers.
161
162	```
163	.glider-track {
164	scrollbar-width: none;
165	}
166	```
167
168
169	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.
170
171	To hide the scrollbars in Firefox, you'll want to wrap your glider with `<div class="glider-wrap">` and apply the following CSS/JS:
172
173	```css
174	@-moz-document url-prefix() {
175	.glider-track {
176	margin-bottom: 17px;
177	}
178	.glider-wrap {
179	overflow: hidden;
180	}
181	}
182	```
183
184	```javascript
185	document.addEventListener('glider-loaded', hideFFScrollBars);
186	document.addEventListener('glider-refresh', hideFFScrollBars);
187	function hideFFScrollBars(e){
188	var scrollbarHeight = 17; // Currently 17, may change with updates
189	if(/firefox/i.test(navigator.userAgent)){
190	// We only need to appy to desktop. Firefox for mobile uses
191	// a different rendering engine (WebKit)
192	if (window.innerWidth > 575){
193	e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
194	}
195	}
196	}
197	```
198
199	#### Packages using Glider.js :rocket:
200
201	- [](https://www.npmjs.com/package/react-gliderreact-glider](https://www.npmjs.com/package/react-glider](https://www.npmjs.com/package/react-glider) - A react wrapper for Glider.js written in typescript.
202
203	#### Dependencies
204
205	None :)
206
207	#### License
208
209	Copyright (c) 2018 Nick Piscitelli
210
211	Licensed under the MIT license.
212
213	It's all yours.
214