Skip to content

Commit b2211fe

Browse files
barthybarthy-koeln
barthy
authored and
barthy-koeln
committed
v3.0.0
1 parent 8c6bcf3 commit b2211fe

19 files changed

+177
-83
lines changed

‎README.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,38 @@ Mostly CSS slider with great performance.
1212

1313
[demo](https://barthy-koeln.github.io/scroll-snap-slider/) | [docs](https://barthy-koeln.github.io/scroll-snap-slider/docs/)
1414

15+
## Table of Contents
16+
17+
- [Premise](#premise)
18+
- [Restrictions](#restrictions)
19+
- [Installing](#installing)
20+
- [Usage](#usage)
21+
- [Markup](#markup)
22+
- [CSS](#css)
23+
- [Additional Styles](#additional-styles)
24+
- [JavaScript](#javascript)
25+
- [API](#api)
26+
- [Events](#events)
27+
- [Public Properties](#public-properties)
28+
- [Support](#support)
29+
1530
## Premise
1631

1732
This library is an opinionated minimal implementation of a common feature across many websites.
18-
To keep it small (see badges above), there are not many fancy features and there is almost no error handling.
33+
To keep it small, there are not many fancy features and there is almost no error handling.
34+
35+
Here are the sizes of individual modules, using terser and gzip with default options.
36+
The size increase at [bundlephobia](https://bundlephobia.com/result?p=scroll-snap-slider) between v2 and v3 is due to
37+
the entrypoint changing from 'ScrollSnapSlider' to 'index'.
38+
39+
| Item | minified | minified + gzipped |
40+
|---------------------|----------|--------------------|
41+
| index | 348 B | 143 B |
42+
| ScrollSnapAutoplay | 1497 B | 549 B |
43+
| ScrollSnapDraggable | 2425 B | 754 B |
44+
| ScrollSnapLoop | 1754 B | 603 B |
45+
| ScrollSnapPlugin | 70 B | 110 B |
46+
| ScrollSnapSlider | 2268 B | 783 B |
1947

2048
However, with a clear API and the use of a ES6 class, it can provide a useful base for custom extensions.
2149

‎gh-pages/demo/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "./page.css";
22
@import "./feature_toggle.css";
3-
@import "../dist/scroll-snap-slider.css";
3+
@import "https://unpkg.com/[email protected]/dist/scroll-snap-slider.css";
44

55
.scroll-snap-slider {
66
--slider-h: 300px;

‎gh-pages/demo/slider-multi.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js'
1+
import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0'
22

33
const sliderMultiElement = document.querySelector('.scroll-snap-slider.-multi')
44
const sliderMulti = new ScrollSnapSlider({ element: sliderMultiElement })

‎gh-pages/demo/slider-responsive.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js'
1+
import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0'
22

33
const sliderResponsiveElement = document.querySelector('.scroll-snap-slider.-responsive')
44
const sliderResponsive = new ScrollSnapSlider({ element: sliderResponsiveElement })

‎gh-pages/demo/slider-simple.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
ScrollSnapDraggable,
44
ScrollSnapLoop,
55
ScrollSnapSlider
6-
} from '../dist/scroll-snap-slider.esm.js'
6+
} from 'https://unpkg.com/scroll-snap-slider@3.0.0'
77

88
const sliderSimpleElement = document.querySelector('.scroll-snap-slider.-simple')
99
const slides = sliderSimpleElement.getElementsByClassName('scroll-snap-slide')

‎gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h4>Hierarchy</h4>
2727
<ul class="tsd-hierarchy">
2828
<li><span class="target">ScrollSnapAutoplay</span></li></ul></li></ul></section><aside class="tsd-sources">
2929
<ul>
30-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L6">src/ScrollSnapAutoplay.ts:6</a></li></ul></aside>
30+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L6">src/ScrollSnapAutoplay.ts:6</a></li></ul></aside>
3131
<section class="tsd-panel-group tsd-index-group">
3232
<section class="tsd-panel tsd-index-panel">
3333
<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -76,7 +76,7 @@ <h5>events: <span class="tsd-signature-type">string</span><span class="tsd-signa
7676
<h4 class="tsd-returns-title">Returns <a href="ScrollSnapAutoplay.ScrollSnapAutoplay.html" class="tsd-signature-type" data-tsd-kind="Class">ScrollSnapAutoplay</a></h4><aside class="tsd-sources">
7777
<p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#constructor">constructor</a></p>
7878
<ul>
79-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L32">src/ScrollSnapAutoplay.ts:32</a></li></ul></aside></li></ul></section></section>
79+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L32">src/ScrollSnapAutoplay.ts:32</a></li></ul></aside></li></ul></section></section>
8080
<section class="tsd-panel-group tsd-member-group">
8181
<h2>Properties</h2>
8282
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="debounceId" class="tsd-anchor"></a>
@@ -85,43 +85,43 @@ <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code>
8585
<div class="tsd-comment tsd-typography"><p>Used to debounce the re-enabling after a user interaction</p>
8686
</div><aside class="tsd-sources">
8787
<ul>
88-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L20">src/ScrollSnapAutoplay.ts:20</a></li></ul></aside></section>
88+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L20">src/ScrollSnapAutoplay.ts:20</a></li></ul></aside></section>
8989
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="events" class="tsd-anchor"></a>
9090
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span>events</span><a href="#events" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
9191
<div class="tsd-signature">events<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div>
9292
<div class="tsd-comment tsd-typography"><p>Event names that temporarily disable the autoplay behaviour</p>
9393
</div><aside class="tsd-sources">
9494
<ul>
95-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L30">src/ScrollSnapAutoplay.ts:30</a></li></ul></aside></section>
95+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L30">src/ScrollSnapAutoplay.ts:30</a></li></ul></aside></section>
9696
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="interval" class="tsd-anchor"></a>
9797
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>interval</span><a href="#interval" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
9898
<div class="tsd-signature">interval<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
9999
<div class="tsd-comment tsd-typography"><p>Interval ID</p>
100100
</div><aside class="tsd-sources">
101101
<ul>
102-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L25">src/ScrollSnapAutoplay.ts:25</a></li></ul></aside></section>
102+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L25">src/ScrollSnapAutoplay.ts:25</a></li></ul></aside></section>
103103
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="intervalDuration" class="tsd-anchor"></a>
104104
<h3 class="tsd-anchor-link"><span>interval<wbr/>Duration</span><a href="#intervalDuration" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
105105
<div class="tsd-signature">interval<wbr/>Duration<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
106106
<div class="tsd-comment tsd-typography"><p>Duration in milliseconds between slide changes</p>
107107
</div><aside class="tsd-sources">
108108
<ul>
109-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L10">src/ScrollSnapAutoplay.ts:10</a></li></ul></aside></section>
109+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L10">src/ScrollSnapAutoplay.ts:10</a></li></ul></aside></section>
110110
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><a id="slider" class="tsd-anchor"></a>
111111
<h3 class="tsd-anchor-link"><span>slider</span><a href="#slider" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
112112
<div class="tsd-signature">slider<span class="tsd-signature-symbol">:</span> <a href="ScrollSnapSlider.ScrollSnapSlider.html" class="tsd-signature-type" data-tsd-kind="Class">ScrollSnapSlider</a></div>
113113
<div class="tsd-comment tsd-typography"><p>Reference to the slider this plugin is attached to.</p>
114114
</div><aside class="tsd-sources">
115115
<p>Inherited from <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#slider">slider</a></p>
116116
<ul>
117-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapPlugin.ts#L11">src/ScrollSnapPlugin.ts:11</a></li></ul></aside></section>
117+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapPlugin.ts#L11">src/ScrollSnapPlugin.ts:11</a></li></ul></aside></section>
118118
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="timeoutDuration" class="tsd-anchor"></a>
119119
<h3 class="tsd-anchor-link"><span>timeout<wbr/>Duration</span><a href="#timeoutDuration" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
120120
<div class="tsd-signature">timeout<wbr/>Duration<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
121121
<div class="tsd-comment tsd-typography"><p>Duration in milliseconds after human interaction where the slider will not autoplay</p>
122122
</div><aside class="tsd-sources">
123123
<ul>
124-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L15">src/ScrollSnapAutoplay.ts:15</a></li></ul></aside></section></section>
124+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L15">src/ScrollSnapAutoplay.ts:15</a></li></ul></aside></section></section>
125125
<section class="tsd-panel-group tsd-member-group">
126126
<h2>Accessors</h2>
127127
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="id" class="tsd-anchor"></a>
@@ -135,7 +135,7 @@ <h3>See</h3></div>
135135
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><aside class="tsd-sources">
136136
<p>Overrides ScrollSnapPlugin.id</p>
137137
<ul>
138-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L44">src/ScrollSnapAutoplay.ts:44</a></li></ul></aside></li></ul></section></section>
138+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L44">src/ScrollSnapAutoplay.ts:44</a></li></ul></aside></li></ul></section></section>
139139
<section class="tsd-panel-group tsd-member-group">
140140
<h2>Methods</h2>
141141
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="disable" class="tsd-anchor"></a>
@@ -149,7 +149,7 @@ <h3 class="tsd-anchor-link"><span>disable</span><a href="#disable" aria-label="P
149149
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
150150
<p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#disable">disable</a></p>
151151
<ul>
152-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L66">src/ScrollSnapAutoplay.ts:66</a></li></ul></aside></li></ul></section>
152+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L66">src/ScrollSnapAutoplay.ts:66</a></li></ul></aside></li></ul></section>
153153
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="disableTemporarily" class="tsd-anchor"></a>
154154
<h3 class="tsd-anchor-link"><span>disable<wbr/>Temporarily</span><a href="#disableTemporarily" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
155155
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -159,7 +159,7 @@ <h3 class="tsd-anchor-link"><span>disable<wbr/>Temporarily</span><a href="#disab
159159
</div>
160160
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
161161
<ul>
162-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L80">src/ScrollSnapAutoplay.ts:80</a></li></ul></aside></li></ul></section>
162+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L80">src/ScrollSnapAutoplay.ts:80</a></li></ul></aside></li></ul></section>
163163
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="enable" class="tsd-anchor"></a>
164164
<h3 class="tsd-anchor-link"><span>enable</span><a href="#enable" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
165165
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -171,7 +171,7 @@ <h3 class="tsd-anchor-link"><span>enable</span><a href="#enable" aria-label="Per
171171
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
172172
<p>Overrides <a href="ScrollSnapPlugin.ScrollSnapPlugin.html">ScrollSnapPlugin</a>.<a href="ScrollSnapPlugin.ScrollSnapPlugin.html#enable">enable</a></p>
173173
<ul>
174-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L52">src/ScrollSnapAutoplay.ts:52</a></li></ul></aside></li></ul></section>
174+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L52">src/ScrollSnapAutoplay.ts:52</a></li></ul></aside></li></ul></section>
175175
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="onInterval" class="tsd-anchor"></a>
176176
<h3 class="tsd-anchor-link"><span>on<wbr/>Interval</span><a href="#onInterval" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
177177
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -181,7 +181,7 @@ <h3 class="tsd-anchor-link"><span>on<wbr/>Interval</span><a href="#onInterval" a
181181
</div>
182182
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
183183
<ul>
184-
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/debbeec/src/ScrollSnapAutoplay.ts#L95">src/ScrollSnapAutoplay.ts:95</a></li></ul></aside></li></ul></section></section></div>
184+
<li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/6724be3/src/ScrollSnapAutoplay.ts#L95">src/ScrollSnapAutoplay.ts:95</a></li></ul></aside></li></ul></section></section></div>
185185
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
186186
<div class="tsd-navigation settings">
187187
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

0 commit comments

Comments
 (0)