diff --git a/README.md b/README.md index fe828f3..c4c5b35 100755 --- a/README.md +++ b/README.md @@ -12,10 +12,38 @@ Mostly CSS slider with great performance. [demo](https://barthy-koeln.github.io/scroll-snap-slider/) | [docs](https://barthy-koeln.github.io/scroll-snap-slider/docs/) +## Table of Contents + +- [Premise](#premise) +- [Restrictions](#restrictions) +- [Installing](#installing) +- [Usage](#usage) + - [Markup](#markup) + - [CSS](#css) + - [Additional Styles](#additional-styles) + - [JavaScript](#javascript) +- [API](#api) +- [Events](#events) +- [Public Properties](#public-properties) +- [Support](#support) + ## Premise This library is an opinionated minimal implementation of a common feature across many websites. -To keep it small (see badges above), there are not many fancy features and there is almost no error handling. +To keep it small, there are not many fancy features and there is almost no error handling. + +Here are the sizes of individual modules, using terser and gzip with default options. +The size increase at [bundlephobia](https://bundlephobia.com/result?p=scroll-snap-slider) between v2 and v3 is due to +the entrypoint changing from 'ScrollSnapSlider' to 'index'. + +| Item | minified | minified + gzipped | +|---------------------|----------|--------------------| +| index | 348 B | 143 B | +| ScrollSnapAutoplay | 1497 B | 549 B | +| ScrollSnapDraggable | 2425 B | 754 B | +| ScrollSnapLoop | 1754 B | 603 B | +| ScrollSnapPlugin | 70 B | 110 B | +| ScrollSnapSlider | 2268 B | 783 B | However, with a clear API and the use of a ES6 class, it can provide a useful base for custom extensions. diff --git a/gh-pages/demo/index.css b/gh-pages/demo/index.css index c272560..f46cd4f 100755 --- a/gh-pages/demo/index.css +++ b/gh-pages/demo/index.css @@ -1,6 +1,6 @@ @import "./page.css"; @import "./feature_toggle.css"; -@import "../dist/scroll-snap-slider.css"; +@import "https://unpkg.com/scroll-snap-slider@3.0.0/dist/scroll-snap-slider.css"; .scroll-snap-slider { --slider-h: 300px; diff --git a/gh-pages/demo/slider-multi.js b/gh-pages/demo/slider-multi.js index 44e0e16..1b4747e 100644 --- a/gh-pages/demo/slider-multi.js +++ b/gh-pages/demo/slider-multi.js @@ -1,4 +1,4 @@ -import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js' +import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0' const sliderMultiElement = document.querySelector('.scroll-snap-slider.-multi') const sliderMulti = new ScrollSnapSlider({ element: sliderMultiElement }) diff --git a/gh-pages/demo/slider-responsive.js b/gh-pages/demo/slider-responsive.js index 8c94417..8986954 100644 --- a/gh-pages/demo/slider-responsive.js +++ b/gh-pages/demo/slider-responsive.js @@ -1,4 +1,4 @@ -import { ScrollSnapSlider } from '../dist/scroll-snap-slider.esm.js' +import { ScrollSnapSlider } from 'https://unpkg.com/scroll-snap-slider@3.0.0' const sliderResponsiveElement = document.querySelector('.scroll-snap-slider.-responsive') const sliderResponsive = new ScrollSnapSlider({ element: sliderResponsiveElement }) diff --git a/gh-pages/demo/slider-simple.js b/gh-pages/demo/slider-simple.js index b75e262..7403e55 100644 --- a/gh-pages/demo/slider-simple.js +++ b/gh-pages/demo/slider-simple.js @@ -3,7 +3,7 @@ import { ScrollSnapDraggable, ScrollSnapLoop, ScrollSnapSlider -} from '../dist/scroll-snap-slider.esm.js' +} from 'https://unpkg.com/scroll-snap-slider@3.0.0' const sliderSimpleElement = document.querySelector('.scroll-snap-slider.-simple') const slides = sliderSimpleElement.getElementsByClassName('scroll-snap-slide') diff --git a/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html b/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html index e472052..21b129b 100644 --- a/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html +++ b/gh-pages/docs/classes/ScrollSnapAutoplay.ScrollSnapAutoplay.html @@ -27,7 +27,7 @@
Private
Private
Readonly
eventsEvent names that temporarily disable the autoplay behaviour
Private
intervalInterval ID
Duration in milliseconds between slide changes
Inherited from ScrollSnapPlugin.slider
Duration in milliseconds after human interaction where the slider will not autoplay
Private
mousePrivate
onPrivate
Private
startPrivate
stopPrivate
loopPrivate
Private
loopPrivate
Private
loopPrivate
Private
removePrivate
Private
sortAbstract
Abstract
enableAbstract
Base element of this slider
Calculated size of a single item
additional behaviour
Optional
options: boolean | EventListenerOptionsPrivate
resizeResize observer used to update item size
Timeout delay in milliseconds used to catch the end of scroll events
Private
scrollTimeout ID used to catch the end of scroll events
Optional
entries: Returns numberActive slide
Private
slideActive slide's scrollLeft in the containing element
Private
calculatePrivate
Private
dispatchPrivate
onPrivate
Private
onPrivate
Private
onAll options have sensitive defaults. The only required option is the element
.
Used to debounce the re-enabling after a user interaction