@evermade/overflow-slider 3.1.0 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +339 -8
  2. package/dist/core/details.esm.js +3 -3
  3. package/dist/core/details.min.js +1 -1
  4. package/dist/core/overflow-slider.esm.js +1 -0
  5. package/dist/core/overflow-slider.min.js +1 -1
  6. package/dist/core/slider.esm.js +69 -22
  7. package/dist/core/slider.min.js +1 -1
  8. package/dist/core/utils.esm.js +2 -1
  9. package/dist/core/utils.min.js +1 -1
  10. package/dist/overflow-slider.css +1 -1
  11. package/dist/plugins/arrows/arrows/index.esm.js +7 -4
  12. package/dist/plugins/arrows/arrows/index.min.js +1 -1
  13. package/dist/plugins/dots/dots/index.esm.js +0 -4
  14. package/dist/plugins/fade/fade/index.esm.js +4 -4
  15. package/dist/plugins/fade/fade/index.min.js +1 -1
  16. package/dist/plugins/full-width/full-width/index.esm.js +7 -2
  17. package/dist/plugins/full-width/full-width/index.min.js +1 -1
  18. package/dist/plugins/scroll-indicator/scroll-indicator/index.esm.js +18 -18
  19. package/dist/plugins/scroll-indicator/scroll-indicator/index.min.js +1 -1
  20. package/dist/plugins/thumbnails/thumbnails/index.esm.js +8 -5
  21. package/dist/plugins/thumbnails/thumbnails/index.min.js +1 -1
  22. package/docs/assets/demo.css +11 -1
  23. package/docs/assets/demo.js +38 -12
  24. package/docs/dist/core/details.esm.js +3 -3
  25. package/docs/dist/core/details.min.js +1 -1
  26. package/docs/dist/core/overflow-slider.esm.js +1 -0
  27. package/docs/dist/core/overflow-slider.min.js +1 -1
  28. package/docs/dist/core/slider.esm.js +69 -22
  29. package/docs/dist/core/slider.min.js +1 -1
  30. package/docs/dist/core/utils.esm.js +2 -1
  31. package/docs/dist/core/utils.min.js +1 -1
  32. package/docs/dist/overflow-slider.css +1 -1
  33. package/docs/dist/plugins/arrows/arrows/index.esm.js +7 -4
  34. package/docs/dist/plugins/arrows/arrows/index.min.js +1 -1
  35. package/docs/dist/plugins/dots/dots/index.esm.js +0 -4
  36. package/docs/dist/plugins/fade/fade/index.esm.js +4 -4
  37. package/docs/dist/plugins/fade/fade/index.min.js +1 -1
  38. package/docs/dist/plugins/full-width/full-width/index.esm.js +7 -2
  39. package/docs/dist/plugins/full-width/full-width/index.min.js +1 -1
  40. package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.esm.js +18 -18
  41. package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.min.js +1 -1
  42. package/docs/dist/plugins/thumbnails/thumbnails/index.esm.js +8 -5
  43. package/docs/dist/plugins/thumbnails/thumbnails/index.min.js +1 -1
  44. package/docs/index-rtl.html +396 -0
  45. package/docs/index.html +1 -1
  46. package/package.json +1 -1
  47. package/src/core/details.ts +3 -3
  48. package/src/core/overflow-slider.ts +1 -0
  49. package/src/core/slider.ts +79 -27
  50. package/src/core/types.ts +10 -3
  51. package/src/core/utils.ts +9 -5
  52. package/src/plugins/arrows/index.ts +8 -6
  53. package/src/plugins/dots/index.ts +1 -5
  54. package/src/plugins/drag-scrolling/index.ts +1 -1
  55. package/src/plugins/fade/index.ts +5 -5
  56. package/src/plugins/fade/styles.scss +10 -0
  57. package/src/plugins/full-width/index.ts +9 -3
  58. package/src/plugins/scroll-indicator/index.ts +60 -62
  59. package/src/plugins/skip-links/index.ts +1 -1
  60. package/src/plugins/thumbnails/index.ts +9 -6
package/docs/index-rtl.html ADDED
@@ -0,0 +1,396 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="rtl">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link href="dist/overflow-slider.css" rel="stylesheet" />
7
+ <link href="assets/demo.css" rel="stylesheet" />
8
+ <title>Demo – overflow-slider</title>
9
+ <meta property="og:description" content="overflow-slider" />
10
+ </head>
11
+ <body>
12
+ <div class="site">
13
+ <header class="site-header">
14
+ <div class="site-header__inner">
15
+ <div class="site-branding">
16
+ <a href="https://github.com/evermade/overflow-slider" class="site-logo" aria-label="Evermade">
17
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 270 270" width="64" height="64">
18
+ <path fill="#F04D37" d="M0 0h270v270H0z"/>
19
+ <path fill="#fff" d="M134.748 73.7339c-13.949-.1043-27.398 5.1741-37.535 14.7314-10.1368 9.5573-16.1761 22.6537-16.8549 36.5487H189.235c-.715-13.9-6.779-26.9892-16.929-36.5417-10.15-9.5525-23.603-14.8318-37.558-14.7384Zm85.532 74.6601H79.2372c2.228 13.263 9.1042 25.307 19.4039 33.986 10.2999 8.679 23.3539 13.43 36.8379 13.406 9.931.362 19.754-2.16 28.276-7.26 8.521-5.099 15.375-12.557 19.729-21.467h32.848c-13.354 35.921-41.474 54.926-82.072 54.926-11.548.213-23.019-1.905-33.726-6.227-10.7059-4.321-20.4256-10.757-28.5743-18.921-8.1488-8.163-14.5585-17.886-18.8439-28.583-4.2854-10.697-6.358-22.148-6.0933-33.664 0-49.9195 35.7237-87.59 87.7255-87.59 50.588 0 87.238 37.476 87.238 85.743.118 5.275-.489 10.541-1.804 15.651"/>
20
+ </svg>
21
+ <span>@evermade/overflow-slider</span>
22
+ </a>
23
+ </div>
24
+ </div>
25
+ </header>
26
+ <script type="module" src="assets/demo.js"></script>
27
+ <main id="main" class="site-main">
28
+ <article class="entry">
29
+ <div class="entry__content">
30
+ <h1>Overflow Slider Demos RTL</h1>
31
+
32
+ <section class="entry__section">
33
+ <h2>Basic Demos</h2>
34
+ <div class="entry__item">
35
+ <h3>Pure CSS</h3>
36
+ <p>No plugins applied. Using only CSS.</p>
37
+ <div class="overflow-slider example-container example-container-1-css">
38
+ <a href="#1" class="example-item example-item--1">1</a>
39
+ <a href="#2" class="example-item example-item--2">2</a>
40
+ <a href="#3" class="example-item example-item--3">3</a>
41
+ <a href="#4" class="example-item example-item--4">4</a>
42
+ <a href="#5" class="example-item example-item--5">5</a>
43
+ <a href="#6" class="example-item example-item--6">6</a>
44
+ <a href="#7" class="example-item example-item--7">7</a>
45
+ <a href="#8" class="example-item example-item--8">8</a>
46
+ <a href="#9" class="example-item example-item--9">9</a>
47
+ <a href="#10" class="example-item example-item--10">10</a>
48
+ <a href="#11" class="example-item example-item--11">11</a>
49
+ <a href="#12" class="example-item example-item--12">12</a>
50
+ <a href="#13" class="example-item example-item--13">13</a>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="entry__item">
55
+ <h3>Mouse Dragging</h3>
56
+ <p>Drag slides with mouse. Uses DragScrollingPlugin. These slides are clickable.</p>
57
+ <div class="overflow-slider example-container example-container-1-drag-scrolling-clickable">
58
+ <a href="#1" class="example-item example-item--1">1</a>
59
+ <a href="#2" class="example-item example-item--2">2</a>
60
+ <a href="#3" class="example-item example-item--3">3</a>
61
+ <a href="#4" class="example-item example-item--4">4</a>
62
+ <a href="#5" class="example-item example-item--5">5</a>
63
+ <a href="#6" class="example-item example-item--6">6</a>
64
+ <a href="#7" class="example-item example-item--7">7</a>
65
+ <a href="#8" class="example-item example-item--8">8</a>
66
+ <a href="#9" class="example-item example-item--9">9</a>
67
+ <a href="#10" class="example-item example-item--10">10</a>
68
+ <a href="#11" class="example-item example-item--11">11</a>
69
+ <a href="#12" class="example-item example-item--12">12</a>
70
+ <a href="#13" class="example-item example-item--13">13</a>
71
+ </div>
72
+ <p style="margin-top:1.5rem;">These slides are not clickable.</p>
73
+ <div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable">
74
+ <div class="example-item example-item--1">1</div>
75
+ <div class="example-item example-item--2">2</div>
76
+ <div class="example-item example-item--3">3</div>
77
+ <div class="example-item example-item--4">4</div>
78
+ <div class="example-item example-item--5">5</div>
79
+ <div class="example-item example-item--6">6</div>
80
+ <div class="example-item example-item--7">7</div>
81
+ <div class="example-item example-item--8">8</div>
82
+ <div class="example-item example-item--9">9</div>
83
+ <div class="example-item example-item--10">10</div>
84
+ <div class="example-item example-item--11">11</div>
85
+ <div class="example-item example-item--12">12</div>
86
+ <div class="example-item example-item--13">13</div>
87
+ </div>
88
+ <p style="margin-top:1.5rem;">Scroll-snap emulation enabled.</p>
89
+ <div class="overflow-slider example-container example-container-1-drag-scrolling-scroll-snap">
90
+ <div class="example-item example-item--1">1</div>
91
+ <div class="example-item example-item--2">2</div>
92
+ <div class="example-item example-item--3">3</div>
93
+ <div class="example-item example-item--4">4</div>
94
+ <div class="example-item example-item--5">5</div>
95
+ <div class="example-item example-item--6">6</div>
96
+ <div class="example-item example-item--7">7</div>
97
+ <div class="example-item example-item--8">8</div>
98
+ <div class="example-item example-item--9">9</div>
99
+ <div class="example-item example-item--10">10</div>
100
+ <div class="example-item example-item--11">11</div>
101
+ <div class="example-item example-item--12">12</div>
102
+ <div class="example-item example-item--13">13</div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="entry__item">
107
+ <h3>Arrows</h3>
108
+ <p>Display buttons to move slides. Uses ArrowsPlugin.</p>
109
+ <div class="overflow-slider example-container example-container-1-arrows">
110
+ <a href="#1" class="example-item example-item--1">1</a>
111
+ <a href="#2" class="example-item example-item--2">2</a>
112
+ <a href="#3" class="example-item example-item--3">3</a>
113
+ <a href="#4" class="example-item example-item--4">4</a>
114
+ <a href="#5" class="example-item example-item--5">5</a>
115
+ <a href="#6" class="example-item example-item--6">6</a>
116
+ <a href="#7" class="example-item example-item--7">7</a>
117
+ <a href="#8" class="example-item example-item--8">8</a>
118
+ <a href="#9" class="example-item example-item--9">9</a>
119
+ <a href="#10" class="example-item example-item--10">10</a>
120
+ <a href="#11" class="example-item example-item--11">11</a>
121
+ <a href="#12" class="example-item example-item--12">12</a>
122
+ <a href="#13" class="example-item example-item--13">13</a>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="entry__item">
127
+ <h3>Scroll Indicator</h3>
128
+ <p>Display scroll indicator. Uses ScrollIndicatorPlugin.</p>
129
+ <div class="overflow-slider example-container example-container-1-scroll-indicator">
130
+ <a href="#1" class="example-item example-item--1">1</a>
131
+ <a href="#2" class="example-item example-item--2">2</a>
132
+ <a href="#3" class="example-item example-item--3">3</a>
133
+ <a href="#4" class="example-item example-item--4">4</a>
134
+ <a href="#5" class="example-item example-item--5">5</a>
135
+ <a href="#6" class="example-item example-item--6">6</a>
136
+ <a href="#7" class="example-item example-item--7">7</a>
137
+ <a href="#8" class="example-item example-item--8">8</a>
138
+ <a href="#9" class="example-item example-item--9">9</a>
139
+ <a href="#10" class="example-item example-item--10">10</a>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="entry__item">
144
+ <h3>Dots</h3>
145
+ <p>Display dots indicator. Uses DotsPlugin.</p>
146
+ <div class="overflow-slider example-container example-container-1-dots">
147
+ <a href="#1" class="example-item example-item--1">1</a>
148
+ <a href="#2" class="example-item example-item--2">2</a>
149
+ <a href="#3" class="example-item example-item--3">3</a>
150
+ <a href="#4" class="example-item example-item--4">4</a>
151
+ <a href="#5" class="example-item example-item--5">5</a>
152
+ <a href="#6" class="example-item example-item--6">6</a>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="entry__item">
157
+ <h3>Fade</h3>
158
+ <p>Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.</p>
159
+ <div class="example-container-1-fade-wrap">
160
+ <div class="example-container-1-fade__start"></div>
161
+ <div class="overflow-slider example-container example-container-1-fade">
162
+ <a href="#1" class="example-item example-item--1">1</a>
163
+ <a href="#2" class="example-item example-item--2">2</a>
164
+ <a href="#3" class="example-item example-item--3">3</a>
165
+ <a href="#4" class="example-item example-item--4">4</a>
166
+ <a href="#5" class="example-item example-item--5">5</a>
167
+ <a href="#6" class="example-item example-item--6">6</a>
168
+ <a href="#7" class="example-item example-item--7">7</a>
169
+ <a href="#8" class="example-item example-item--8">8</a>
170
+ <a href="#9" class="example-item example-item--9">9</a>
171
+ <a href="#10" class="example-item example-item--10">10</a>
172
+ </div>
173
+ <div class="example-container-1-fade__end"></div>
174
+ </div>
175
+ </div>
176
+
177
+ </section>
178
+
179
+ <section class="entry__section">
180
+
181
+ <h2>Slide Contents</h2>
182
+
183
+ <div class="entry__item">
184
+ <h3>Perfectly Fitting Slides</h3>
185
+ <p>Slides fill the container perfectly.</p>
186
+ <div class="overflow-slider example-container example-container-2-perfect-fit">
187
+ <a href="#1" class="example-item example-item--1">1</a>
188
+ <a href="#2" class="example-item example-item--2">2</a>
189
+ <a href="#3" class="example-item example-item--3">3</a>
190
+ <a href="#4" class="example-item example-item--4">4</a>
191
+ <a href="#5" class="example-item example-item--5">5</a>
192
+ <a href="#6" class="example-item example-item--6">6</a>
193
+ <a href="#7" class="example-item example-item--7">7</a>
194
+ <a href="#8" class="example-item example-item--8">8</a>
195
+ <a href="#9" class="example-item example-item--9">9</a>
196
+ <a href="#10" class="example-item example-item--10">10</a>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="entry__item">
201
+ <h3>Varying Width Slides</h3>
202
+ <p>Slides are not equal width.</p>
203
+ <div class="overflow-slider example-container example-container-2-varying-widths">
204
+ <a href="#1" class="example-item example-item--1">1</a>
205
+ <a href="#2" class="example-item example-item--2">2</a>
206
+ <a href="#3" class="example-item example-item--3">3</a>
207
+ <a href="#4" class="example-item example-item--4">4</a>
208
+ <a href="#5" class="example-item example-item--5">5</a>
209
+ <a href="#6" class="example-item example-item--6">6</a>
210
+ <a href="#7" class="example-item example-item--7">7</a>
211
+ <a href="#8" class="example-item example-item--8">8</a>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="entry__item">
216
+ <h3>Only Few Slides</h3>
217
+ <p>Not enough slides to have a slider (on mobile has though).</p>
218
+ <div class="overflow-slider example-container example-container-2-only-few-slides">
219
+ <a href="#1" class="example-item example-item--1">1</a>
220
+ <a href="#2" class="example-item example-item--2">2</a>
221
+ <a href="#3" class="example-item example-item--3">3</a>
222
+ </div>
223
+ </div>
224
+
225
+ </section>
226
+
227
+ <section class="entry__section">
228
+
229
+ <h2>CSS Trickery</h2>
230
+
231
+ <div class="entry__item">
232
+ <h3>Scroll Snapping (mandatory)</h3>
233
+ <p>Force scrolling to snap to slide always.</p>
234
+ <div class="overflow-slider example-container example-container-3-scroll-snapping-mandatory">
235
+ <a href="#1" class="example-item example-item--1">1</a>
236
+ <a href="#2" class="example-item example-item--2">2</a>
237
+ <a href="#3" class="example-item example-item--3">3</a>
238
+ <a href="#4" class="example-item example-item--4">4</a>
239
+ <a href="#5" class="example-item example-item--5">5</a>
240
+ <a href="#6" class="example-item example-item--6">6</a>
241
+ <a href="#7" class="example-item example-item--7">7</a>
242
+ <a href="#8" class="example-item example-item--8">8</a>
243
+ <a href="#9" class="example-item example-item--9">9</a>
244
+ <a href="#10" class="example-item example-item--10">10</a>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="entry__item">
249
+ <h3>Scroll Snapping (proximity)</h3>
250
+ <p>Force scrolling to snap to slide not so strictly.</p>
251
+ <div class="overflow-slider example-container example-container-3-scroll-snapping-proximity">
252
+ <a href="#1" class="example-item example-item--1">1</a>
253
+ <a href="#2" class="example-item example-item--2">2</a>
254
+ <a href="#3" class="example-item example-item--3">3</a>
255
+ <a href="#4" class="example-item example-item--4">4</a>
256
+ <a href="#5" class="example-item example-item--5">5</a>
257
+ <a href="#6" class="example-item example-item--6">6</a>
258
+ <a href="#7" class="example-item example-item--7">7</a>
259
+ <a href="#8" class="example-item example-item--8">8</a>
260
+ <a href="#9" class="example-item example-item--9">9</a>
261
+ <a href="#10" class="example-item example-item--10">10</a>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="entry__item">
266
+ <h3>Entrance and Exit Animations (experimental)</h3>
267
+ <p>Animate slides when they appear and disappear. Seem to only work on Chrome.</p>
268
+ <div class="overflow-slider example-container example-container-3-entrance-animation">
269
+ <a href="#1" class="example-item example-item--1">1</a>
270
+ <a href="#2" class="example-item example-item--2">2</a>
271
+ <a href="#3" class="example-item example-item--3">3</a>
272
+ <a href="#4" class="example-item example-item--4">4</a>
273
+ <a href="#5" class="example-item example-item--5">5</a>
274
+ <a href="#6" class="example-item example-item--6">6</a>
275
+ <a href="#7" class="example-item example-item--7">7</a>
276
+ <a href="#8" class="example-item example-item--8">8</a>
277
+ <a href="#9" class="example-item example-item--9">9</a>
278
+ <a href="#10" class="example-item example-item--10">10</a>
279
+ </div>
280
+ </div>
281
+
282
+ </section>
283
+
284
+ <section class="entry__section">
285
+
286
+ <h2>Real Life Usage</h2>
287
+
288
+ <div class="entry__item">
289
+ <h3>Filters</h3>
290
+ <p>Display filter buttons in one line that overflows when necessary.</p>
291
+ <div class="example-4-filters-wrapper">
292
+ <div class="example-4-filters-previous">
293
+ </div>
294
+ <div class="overflow-slider example-container-4-filters">
295
+ <a href="#1" class="example-filter">Development</a>
296
+ <a href="#2" class="example-filter">Design</a>
297
+ <a href="#3" class="example-filter">Marketing</a>
298
+ <a href="#4" class="example-filter">Sales</a>
299
+ <a href="#5" class="example-filter">Support</a>
300
+ <a href="#6" class="example-filter">Management</a>
301
+ <a href="#7" class="example-filter">HR</a>
302
+ <a href="#8" class="example-filter">Finance</a>
303
+ <a href="#9" class="example-filter">Legal</a>
304
+ <a href="#10" class="example-filter">Customer Service</a>
305
+ <a href="#11" class="example-filter">Operations</a>
306
+ <a href="#12" class="example-filter">Other</a>
307
+ </div>
308
+ <div class="example-4-filters-next"></div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="entry__item">
313
+ <h3>Grid On Desktop, Slider On Mobile</h3>
314
+ <p>Display contents differently for different sized screens.</p>
315
+ <div class="overflow-slider example-container-4-grid-or-slider">
316
+ <a href="#1" class="example-item example-item--1">1</a>
317
+ <a href="#2" class="example-item example-item--2">2</a>
318
+ <a href="#3" class="example-item example-item--3">3</a>
319
+ <a href="#4" class="example-item example-item--4">4</a>
320
+ <a href="#5" class="example-item example-item--5">5</a>
321
+ <a href="#6" class="example-item example-item--6">6</a>
322
+ <a href="#7" class="example-item example-item--7">7</a>
323
+ <a href="#8" class="example-item example-item--8">8</a>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="entry__item">
328
+ <h3>Full Width Slider</h3>
329
+ <p>Allow slides to flow in full screen but center them accoring to your content. Uses FullWidthPlugin.</p>
330
+ <div class="example-container-4-full-width-wrapper">
331
+ <div class="overflow-slider example-container-4-full-width">
332
+ <a href="#1" class="example-item example-item--1">1</a>
333
+ <a href="#2" class="example-item example-item--2">2</a>
334
+ <a href="#3" class="example-item example-item--3">3</a>
335
+ <a href="#4" class="example-item example-item--4">4</a>
336
+ <a href="#5" class="example-item example-item--5">5</a>
337
+ <a href="#6" class="example-item example-item--6">6</a>
338
+ <a href="#7" class="example-item example-item--7">7</a>
339
+ <a href="#8" class="example-item example-item--8">8</a>
340
+ <a href="#9" class="example-item example-item--9">9</a>
341
+ <a href="#10" class="example-item example-item--10">10</a>
342
+ <a href="#11" class="example-item example-item--11">11</a>
343
+ <a href="#12" class="example-item example-item--12">12</a>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="entry__item">
349
+ <h3>Synced Slider</h3>
350
+ <p>Sync slides from thumbnails. </p>
351
+ <div class="example-container-4-thumbnails-wrapper">
352
+ <div class="overflow-slider example-container-4-synced-main">
353
+ <a href="#1" class="example-item example-item--1">1</a>
354
+ <a href="#2" class="example-item example-item--2">2</a>
355
+ <a href="#3" class="example-item example-item--3">3</a>
356
+ <a href="#4" class="example-item example-item--4">4</a>
357
+ <a href="#5" class="example-item example-item--5">5</a>
358
+ <a href="#6" class="example-item example-item--6">6</a>
359
+ <a href="#7" class="example-item example-item--7">7</a>
360
+ <a href="#8" class="example-item example-item--8">8</a>
361
+ <a href="#9" class="example-item example-item--9">9</a>
362
+ <a href="#10" class="example-item example-item--10">10</a>
363
+ <a href="#11" class="example-item example-item--11">11</a>
364
+ <a href="#12" class="example-item example-item--12">12</a>
365
+ </div>
366
+ <div class="overflow-slider example-container-4-synced-thumbnails">
367
+ <button class="example-item example-item--1">1</button>
368
+ <button class="example-item example-item--2">2</button>
369
+ <button class="example-item example-item--3">3</button>
370
+ <button class="example-item example-item--4">4</button>
371
+ <button class="example-item example-item--5">5</button>
372
+ <button class="example-item example-item--6">6</button>
373
+ <button class="example-item example-item--7">7</button>
374
+ <button class="example-item example-item--8">8</button>
375
+ <button class="example-item example-item--9">9</button>
376
+ <button class="example-item example-item--10">10</button>
377
+ <button class="example-item example-item--11">11</button>
378
+ <button class="example-item example-item--12">12</button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ </section>
384
+
385
+ </div>
386
+ </article>
387
+ </main>
388
+ <div class="site-footer">
389
+ <p>
390
+ This is demo for the
391
+ <a href="https://github.com/evermade/overflow-slider">@evermade/overflow-slider</a>.
392
+ </p>
393
+ </div>
394
+ </div>
395
+ </body>
396
+ </html>
package/docs/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en-US">
2
+ <html lang="en-US" dir="ltr">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evermade/overflow-slider",
3
- "version": "3.1.0",
3
+ "version": "3.2.1",
4
4
  "description": "Accessible slider tha works with overflow: auto.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/core/details.ts CHANGED
@@ -23,10 +23,10 @@ export default function details( slider: Slider) {
23
23
 
24
24
  amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
25
25
 
26
- if ( Math.floor( slider.container.scrollLeft ) >= 0) {
27
- currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
26
+ if ( Math.floor( slider.getScrollLeft() ) >= 0) {
27
+ currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
28
28
  // consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
29
- if (Math.floor( slider.container.scrollLeft + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
29
+ if (Math.floor( slider.getScrollLeft() + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
30
30
  currentPage = amountOfPages - 1;
31
31
  }
32
32
  }
package/src/core/overflow-slider.ts CHANGED
@@ -23,6 +23,7 @@ export default function OverflowSlider (
23
23
  slidesSelector: ":scope > *",
24
24
  emulateScrollSnap: false,
25
25
  emulateScrollSnapMaxThreshold: 64,
26
+ rtl: false,
26
27
  };
27
28
 
28
29
  const sliderOptions = { ...defaults, ...options };