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 @@

Hierarchy

+
  • Defined in src/ScrollSnapAutoplay.ts:6
  • @@ -76,7 +76,7 @@
    events: stringReturns ScrollSnapAutoplay
    +
  • Defined in src/ScrollSnapAutoplay.ts:32
  • Properties

    @@ -85,28 +85,28 @@
    +
  • Defined in src/ScrollSnapAutoplay.ts:20
  • events: string[]

    Event names that temporarily disable the autoplay behaviour

    +
  • Defined in src/ScrollSnapAutoplay.ts:30
  • interval: number

    Interval ID

    +
  • Defined in src/ScrollSnapAutoplay.ts:25
  • intervalDuration: number

    Duration in milliseconds between slide changes

    +
  • Defined in src/ScrollSnapAutoplay.ts:10
  • slider: ScrollSnapSlider
    @@ -114,14 +114,14 @@
    +
  • Defined in src/ScrollSnapPlugin.ts:11
  • timeoutDuration: number

    Duration in milliseconds after human interaction where the slider will not autoplay

    +
  • Defined in src/ScrollSnapAutoplay.ts:15
  • Accessors

    @@ -135,7 +135,7 @@

    See

    Returns string

    +
  • Defined in src/ScrollSnapAutoplay.ts:44
  • Methods

    @@ -149,7 +149,7 @@
    +
  • Defined in src/ScrollSnapAutoplay.ts:66
  • +
  • Defined in src/ScrollSnapAutoplay.ts:80
  • +
  • Defined in src/ScrollSnapAutoplay.ts:52
  • +
  • Defined in src/ScrollSnapAutoplay.ts:95
  • Returns number

    +
  • Defined in src/ScrollSnapDraggable.ts:75
  • Returns void

    +
  • Defined in src/ScrollSnapDraggable.ts:98
  • +
  • Defined in src/ScrollSnapDraggable.ts:67
  • Returns void

    +
  • Defined in src/ScrollSnapDraggable.ts:108
  • Returns void

    +
  • Defined in src/ScrollSnapDraggable.ts:130
  • Returns void

    +
  • Defined in src/ScrollSnapLoop.ts:53
  • +
  • Defined in src/ScrollSnapLoop.ts:30
  • +
  • Defined in src/ScrollSnapLoop.ts:20
  • +
  • Defined in src/ScrollSnapLoop.ts:64
  • +
  • Defined in src/ScrollSnapLoop.ts:84
  • +
  • Defined in src/ScrollSnapLoop.ts:74
  • +
  • Defined in src/ScrollSnapLoop.ts:43
  • Returns number

    +
  • Defined in src/ScrollSnapLoop.ts:103
  • Returns string

    +
  • Defined in src/ScrollSnapPlugin.ts:21
  • Methods

    @@ -95,7 +95,7 @@

    Returns void

    +
  • Defined in src/ScrollSnapPlugin.ts:33
  • +
  • Defined in src/ScrollSnapPlugin.ts:27
  • Returns void

    +
  • Defined in src/ScrollSnapSlider.ts:32
  • element: HTMLElement

    Base element of this slider

    +
  • Defined in src/ScrollSnapSlider.ts:17
  • itemSize: number

    Calculated size of a single item

    +
  • Defined in src/ScrollSnapSlider.ts:50
  • plugins: Map<string, ScrollSnapPlugin>

    additional behaviour

    +
  • Defined in src/ScrollSnapSlider.ts:22
  • removeEventListener: {
        <K>(type: K, listener: ((this: HTMLElement, ev: HTMLElementEventMap[K]) => any), options?: boolean | EventListenerOptions): void;
        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    @@ -215,14 +215,14 @@
    listener: EventListenerOrEventListenerObjec
    Optional options: boolean | EventListenerOptions

    Returns void

    +
  • Defined in src/ScrollSnapSlider.ts:27
  • resizeObserver: ResizeObserver

    Resize observer used to update item size

    +
  • Defined in src/ScrollSnapSlider.ts:71
  • roundingMethod: ((value: number) => number)
    @@ -246,21 +246,21 @@
    value: number

    Returns number

    +
  • Defined in src/ScrollSnapSlider.ts:40
  • scrollTimeout: number

    Timeout delay in milliseconds used to catch the end of scroll events

    +
  • Defined in src/ScrollSnapSlider.ts:45
  • scrollTimeoutId: number

    Timeout ID used to catch the end of scroll events

    +
  • Defined in src/ScrollSnapSlider.ts:75
  • sizingMethod: ((slider: ScrollSnapSlider, entries?: ResizeObserverEntry[]) => number)
    @@ -290,21 +290,21 @@
    Optional entries: Returns number
    +
  • Defined in src/ScrollSnapSlider.ts:61
  • slide: number

    Active slide

    +
  • Defined in src/ScrollSnapSlider.ts:66
  • slideScrollLeft: number

    Active slide's scrollLeft in the containing element

    +
  • Defined in src/ScrollSnapSlider.ts:80
  • Methods

    @@ -316,7 +316,7 @@
    +
  • Defined in src/ScrollSnapSlider.ts:129
  • +
  • Defined in src/ScrollSnapSlider.ts:175
  • +
  • Defined in src/ScrollSnapSlider.ts:153
  • +
  • Defined in src/ScrollSnapSlider.ts:136
  • Returns boolean

    +
  • Defined in src/ScrollSnapSlider.ts:199
  • +
  • Defined in src/ScrollSnapSlider.ts:210
  • +
  • Defined in src/ScrollSnapSlider.ts:182
  • Returns void

    +
  • Defined in src/ScrollSnapSlider.ts:192
  • Returns void

    +
  • Defined in src/ScrollSnapSlider.ts:144
  • +
  • Defined in src/ScrollSnapSlider.ts:167
  • +
  • Defined in src/ScrollSnapSlider.ts:116
  • +
  • Defined in src/ScrollSnapDraggable.ts:1
  • diff --git a/gh-pages/docs/modules/ScrollSnapLoop.html b/gh-pages/docs/modules/ScrollSnapLoop.html index f671b4e..8962fb6 100644 --- a/gh-pages/docs/modules/ScrollSnapLoop.html +++ b/gh-pages/docs/modules/ScrollSnapLoop.html @@ -16,7 +16,7 @@
  • ScrollSnapLoop
  • Module ScrollSnapLoop

    +
  • Defined in src/ScrollSnapLoop.ts:1
  • diff --git a/gh-pages/docs/modules/ScrollSnapPlugin.html b/gh-pages/docs/modules/ScrollSnapPlugin.html index 02dbf07..4646738 100644 --- a/gh-pages/docs/modules/ScrollSnapPlugin.html +++ b/gh-pages/docs/modules/ScrollSnapPlugin.html @@ -16,7 +16,7 @@
  • ScrollSnapPlugin
  • Module ScrollSnapPlugin

    +
  • Defined in src/ScrollSnapPlugin.ts:1
  • diff --git a/gh-pages/docs/modules/ScrollSnapSlider.html b/gh-pages/docs/modules/ScrollSnapSlider.html index ae8f45e..25f9f78 100644 --- a/gh-pages/docs/modules/ScrollSnapSlider.html +++ b/gh-pages/docs/modules/ScrollSnapSlider.html @@ -16,7 +16,7 @@
  • ScrollSnapSlider
  • Module ScrollSnapSlider

    +
  • Defined in src/ScrollSnapSlider.ts:1
  • diff --git a/gh-pages/docs/types/ScrollSnapSlider.ScrollSnapSliderOptions.html b/gh-pages/docs/types/ScrollSnapSlider.ScrollSnapSliderOptions.html index a868808..db121a4 100644 --- a/gh-pages/docs/types/ScrollSnapSlider.ScrollSnapSliderOptions.html +++ b/gh-pages/docs/types/ScrollSnapSlider.ScrollSnapSliderOptions.html @@ -20,7 +20,7 @@

    Type alias ScrollSnapSliderOptions

    All options have sensitive defaults. The only required option is the element.

    +
  • Defined in src/ScrollSnapSlider.ts:6