This one is just text
154 |Lorem ipsum and all that stuff.
155 |Mostly CSS Slider with great performance
33 |34 | These demos include some additional UI. The Arrows and dots are not included in the library, but code samples 35 | can be copied from the demo code. 36 |
37 |38 | 42 | Read more on GitHub. 43 | 44 |
45 |46 | 50 | Or scroll through the auto-generated docs. 51 | 52 |
53 |Scroll/Swipe horizontally or use the navigation dots...
84 |You can even add anchor links, like this one that leads to slide number three.
85 |The arrows tell you if you can go the next/prev slide.
269 |These arrows disappear if there's nothing to scroll.
398 |It's not pretty but it works. Click the scrollbar arrows, scroll, or drag the scrollbar.
472 |data-index attribute.
6 | */
7 | export class ScrollSnapLoop extends ScrollSnapPlugin {
8 |
9 | /**
10 | * @inheritDoc
11 | */
12 | public get id (): string {
13 | return 'ScrollSnapLoop'
14 | }
15 |
16 | /**
17 | * @inheritDoc
18 | * @override
19 | */
20 | public enable (): void {
21 | this.slider.addEventListener('slide-pass', this.loopSlides)
22 | this.slider.addEventListener('slide-stop', this.loopSlides)
23 | this.loopSlides()
24 | }
25 |
26 | /**
27 | * @inheritDoc
28 | * @override
29 | */
30 | public disable (): void {
31 | this.slider.removeEventListener('slide-pass', this.loopSlides)
32 | this.slider.removeEventListener('slide-stop', this.loopSlides)
33 |
34 | const slides = this.slider.element.querySelectorAllScrollSnapSlider::plugins.
19 | * @see {ScrollSnapSlider.plugins}
20 | */
21 | public abstract get id (): string
22 |
23 | /**
24 | * Add listeners, compute things and enable the desired behaviour.
25 | * Override this with custom behaviour.
26 | */
27 | public abstract enable (): void
28 |
29 | /**
30 | * Remove listeners, clean up dependencies and free up memory.
31 | * Override this with custom behaviour.
32 | */
33 | public abstract disable (): void
34 |
35 | }
--------------------------------------------------------------------------------
/src/lib/ScrollSnapSlider.ts:
--------------------------------------------------------------------------------
1 | import { ScrollSnapPlugin } from './ScrollSnapPlugin';
2 |
3 | /**
4 | * All options have sensitive defaults. The only required option is the element.
5 | */
6 | export type ScrollSnapSliderOptions = PartialoffsetWidth.
63 | * Possible values could be an average of all slides, the min or max values, ...
64 | *
65 | * @param slider current slider
66 | * @param entries resized entries
67 | * @return integer size of a slide in pixels
68 | */
69 | public sizingMethod: (slider: ScrollSnapSlider, entries?: ResizeObserverEntry[] | undefined) => number;
70 |
71 | /**
72 | * Active slide
73 | */
74 | public slide: number;
75 |
76 | /**
77 | * Resize observer used to update item size
78 | */
79 | private resizeObserver: ResizeObserver;
80 |
81 | /**
82 | * Timeout ID used to catch the end of scroll events
83 | */
84 | private scrollTimeoutId: null | number;
85 |
86 | /**
87 | * Active slide's scrollLeft in the containing element
88 | */
89 | private slideScrollLeft: number;
90 |
91 | /**
92 | * Bind methods and possibly attach listeners.
93 | */
94 | constructor(options: ScrollSnapSliderOptions) {
95 | Object.assign(this, {
96 | scrollTimeout: 100,
97 | roundingMethod: Math.round,
98 | sizingMethod: (slider: ScrollSnapSlider) => {
99 | return (slider.element.firstElementChild as HTMLElement).offsetWidth;
100 | },
101 | ...options,
102 | });
103 |
104 | this.scrollTimeoutId = null;
105 | this.addEventListener = this.element.addEventListener.bind(this.element);
106 | this.removeEventListener = this.element.removeEventListener.bind(this.element);
107 | this.plugins = new MapitemSize
196 | * @param entries Optional entries delivered from a ResizeObserver
197 | */
198 | private onResize = (entries?: ResizeObserverEntry[]) => {
199 | this.itemSize = this.sizingMethod(this, entries);
200 | this.update();
201 | };
202 |
203 | /**
204 | * Dispatches an event on the slider's element
205 | */
206 | private dispatch