= {}) {
84 | this._parentEl = parentEl;
85 | this._selector = selector;
86 | this._type = type;
87 | this._classPrefix = classPrefix;
88 | this._bulletCount = bulletCount;
89 | this._renderBullet = renderBullet;
90 | this._renderActiveBullet = renderActiveBullet;
91 | this._renderFraction = renderFraction;
92 | this._fractionCurrentFormat = fractionCurrentFormat;
93 | this._fractionTotalFormat = fractionTotalFormat;
94 | this._scrollOnChange = scrollOnChange;
95 | }
96 |
97 | public init(flicking: Flicking): void {
98 | if (this._flicking) {
99 | this.destroy();
100 | }
101 |
102 | this._flicking = flicking;
103 |
104 | const type = this._type;
105 | const selector = this._selector;
106 | const parentEl = this._parentEl ? this._parentEl : flicking.element;
107 | const wrapper = parentEl.querySelector(selector);
108 |
109 | if (!wrapper) {
110 | throw new Error(`[Flicking-Pagination] Couldn't find element with the given selector: ${selector}`);
111 | }
112 |
113 | this._wrapper = wrapper as HTMLElement;
114 | this._renderer = this._createRenderer(type);
115 |
116 | flicking.on(EVENTS.WILL_CHANGE, this._onIndexChange);
117 | flicking.on(EVENTS.WILL_RESTORE, this._onIndexChange);
118 | flicking.on(EVENTS.PANEL_CHANGE, this.update);
119 |
120 | this.update();
121 | }
122 |
123 | public destroy(): void {
124 | const flicking = this._flicking;
125 |
126 | if (!flicking) {
127 | return;
128 | }
129 |
130 | flicking.off(EVENTS.WILL_CHANGE, this._onIndexChange);
131 | flicking.off(EVENTS.WILL_RESTORE, this._onIndexChange);
132 | flicking.off(EVENTS.PANEL_CHANGE, this.update);
133 |
134 | this._renderer.destroy();
135 | this._removeAllChilds();
136 | this._flicking = null;
137 | }
138 |
139 | public update = (): void => {
140 | this._removeAllChilds();
141 | this._renderer.render();
142 | };
143 |
144 | private _createRenderer(type: PaginationOptions["type"]) {
145 | const options = {
146 | flicking: this._flicking!,
147 | pagination: this,
148 | wrapper: this._wrapper
149 | };
150 |
151 | switch (type) {
152 | case PAGINATION.TYPE.BULLET:
153 | return new BulletRenderer(options);
154 | case PAGINATION.TYPE.FRACTION:
155 | return new FractionRenderer(options);
156 | case PAGINATION.TYPE.SCROLL:
157 | return new ScrollBulletRenderer(options);
158 | default:
159 | throw new Error(`[Flicking-Pagination] type "${type}" is not supported.`);
160 | }
161 | }
162 |
163 | private _onIndexChange = (evt: { index: number }) => {
164 | this._renderer.update(evt.index);
165 | };
166 |
167 | private _removeAllChilds() {
168 | const wrapper = this._wrapper;
169 |
170 | while (wrapper.firstChild) {
171 | wrapper.removeChild(wrapper.firstChild);
172 | }
173 | }
174 | }
175 |
176 | export default Pagination;
177 |
--------------------------------------------------------------------------------
/src/pagination/index.ts:
--------------------------------------------------------------------------------
1 | import Pagination, { PaginationOptions } from "./Pagination";
2 |
3 | export {
4 | Pagination
5 | };
6 |
7 | export type {
8 | PaginationOptions
9 | };
10 |
--------------------------------------------------------------------------------
/src/pagination/renderer/BulletRenderer.ts:
--------------------------------------------------------------------------------
1 | import { PAGINATION } from "../../const";
2 | import { addClass, removeClass } from "../../utils";
3 |
4 | import Renderer from "./Renderer";
5 |
6 | class BulletRenderer extends Renderer {
7 | private _bullets: HTMLElement[] = [];
8 | private _prevIndex: number = -1;
9 |
10 | private get _bulletClass() {
11 | const pagination = this._pagination;
12 | return `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
13 | }
14 |
15 | private get _activeClass() {
16 | const pagination = this._pagination;
17 | return `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
18 | }
19 |
20 | public destroy() {
21 | this._bullets = [];
22 | this._prevIndex = -1;
23 | }
24 |
25 | public render() {
26 | const flicking = this._flicking;
27 | const pagination = this._pagination;
28 | const wrapper = this._wrapper;
29 | const bulletClass = this._bulletClass;
30 | const activeClass = this._activeClass;
31 | const renderBullet = pagination.renderBullet;
32 | const renderActiveBullet = pagination.renderActiveBullet;
33 | const bulletWrapperClass = `${pagination.classPrefix}-${PAGINATION.BULLET_WRAPPER_SUFFIX}`;
34 | const anchorPoints = flicking.camera.anchorPoints;
35 |
36 | addClass(wrapper, bulletWrapperClass);
37 |
38 | wrapper.innerHTML = anchorPoints
39 | .map((anchorPoint, index) => {
40 | if (renderActiveBullet && anchorPoint.panel.index === flicking.index) {
41 | return renderActiveBullet(bulletClass, index);
42 | } else {
43 | return renderBullet(bulletClass, index);
44 | }
45 | })
46 | .join("\n");
47 |
48 | const bullets = [].slice.call(wrapper.children) as HTMLElement[];
49 |
50 | bullets.forEach((bullet, index) => {
51 | const anchorPoint = anchorPoints[index];
52 |
53 | if (anchorPoint.panel.index === flicking.index) {
54 | addClass(bullet, activeClass);
55 | this._prevIndex = index;
56 | }
57 |
58 | this._addBulletEvents(bullet, index);
59 | });
60 |
61 | this._bullets = bullets;
62 | }
63 |
64 | public update(index: number) {
65 | const flicking = this._flicking;
66 | const pagination = this._pagination;
67 | const wrapper = this._wrapper;
68 | const bullets = this._bullets;
69 | const bulletClass = this._bulletClass;
70 | const activeClass = this._activeClass;
71 | const prevIndex = this._prevIndex;
72 | const anchorPoints = flicking.camera.anchorPoints;
73 | const renderBullet = pagination.renderBullet;
74 | const renderActiveBullet = pagination.renderActiveBullet;
75 |
76 | if (anchorPoints.length <= 0) return;
77 |
78 | const anchorOffset = anchorPoints[0].panel.index;
79 | const activeBulletIndex = index - anchorOffset;
80 |
81 | if (prevIndex === activeBulletIndex) return;
82 |
83 | if (renderActiveBullet) {
84 | const prevBullet = bullets[prevIndex];
85 | if (prevBullet) {
86 | const newBullet = this._createBulletFromString(
87 | renderBullet(bulletClass, prevIndex),
88 | prevIndex
89 | );
90 | prevBullet.parentElement!.replaceChild(newBullet, prevBullet);
91 | bullets[prevIndex] = newBullet;
92 | }
93 |
94 | const activeBullet = bullets[activeBulletIndex];
95 | const newActiveBullet = this._createBulletFromString(
96 | renderActiveBullet(`${bulletClass} ${activeClass}`, activeBulletIndex),
97 | activeBulletIndex
98 | );
99 |
100 | wrapper.replaceChild(newActiveBullet, activeBullet);
101 | bullets[activeBulletIndex] = newActiveBullet;
102 | } else {
103 | const activeBullet = bullets[activeBulletIndex];
104 | const prevBullet = bullets[prevIndex];
105 |
106 | if (prevBullet) {
107 | removeClass(prevBullet, activeClass);
108 | }
109 |
110 | addClass(activeBullet, activeClass);
111 | }
112 |
113 | this._prevIndex = activeBulletIndex;
114 | }
115 | }
116 |
117 | export default BulletRenderer;
118 |
--------------------------------------------------------------------------------
/src/pagination/renderer/FractionRenderer.ts:
--------------------------------------------------------------------------------
1 | import { PAGINATION } from "../../const";
2 | import { addClass } from "../../utils";
3 |
4 | import Renderer from "./Renderer";
5 |
6 | class FractionRenderer extends Renderer {
7 | private _prevIndex: number = -1;
8 | private _prevTotal: number = -1;
9 |
10 | public destroy(): void {
11 | this._prevIndex = -1;
12 | this._prevTotal = -1;
13 | }
14 |
15 | public render() {
16 | const flicking = this._flicking;
17 | const wrapper = this._wrapper;
18 | const pagination = this._pagination;
19 | const fractionWrapperClass = `${pagination.classPrefix}-${PAGINATION.FRACTION_WRAPPER_SUFFIX}`;
20 | const fractionCurrentClass = `${pagination.classPrefix}-${PAGINATION.FRACTION_CURRENT_SUFFIX}`;
21 | const fractionTotalClass = `${pagination.classPrefix}-${PAGINATION.FRACTION_TOTAL_SUFFIX}`;
22 |
23 | addClass(wrapper, fractionWrapperClass);
24 |
25 | wrapper.innerHTML = pagination.renderFraction(fractionCurrentClass, fractionTotalClass);
26 |
27 | this.update(flicking.index);
28 | }
29 |
30 | public update(index: number) {
31 | const flicking = this._flicking;
32 | const wrapper = this._wrapper;
33 | const pagination = this._pagination;
34 |
35 | const anchorPoints = flicking.camera.anchorPoints;
36 | const currentIndex = anchorPoints.length > 0
37 | ? index - anchorPoints[0].panel.index + 1
38 | : 0;
39 | const anchorCount = anchorPoints.length;
40 |
41 | if (currentIndex === this._prevIndex && anchorCount === this._prevTotal) return;
42 |
43 | const fractionCurrentSelector = `.${pagination.classPrefix}-${PAGINATION.FRACTION_CURRENT_SUFFIX}`;
44 | const fractionTotalSelector = `.${pagination.classPrefix}-${PAGINATION.FRACTION_TOTAL_SUFFIX}`;
45 |
46 | const currentWrapper = wrapper.querySelector(fractionCurrentSelector) as HTMLElement;
47 | const totalWrapper = wrapper.querySelector(fractionTotalSelector) as HTMLElement;
48 |
49 | currentWrapper.innerHTML = pagination.fractionCurrentFormat(currentIndex);
50 | totalWrapper.innerHTML = pagination.fractionTotalFormat(anchorCount);
51 |
52 | this._prevIndex = currentIndex;
53 | this._prevTotal = anchorCount;
54 | }
55 | }
56 |
57 | export default FractionRenderer;
58 |
--------------------------------------------------------------------------------
/src/pagination/renderer/Renderer.ts:
--------------------------------------------------------------------------------
1 | import Flicking, { FlickingError } from "@egjs/flicking";
2 |
3 | import { BROWSER } from "../../event";
4 | import Pagination from "../Pagination";
5 |
6 | export interface RendererOptions {
7 | flicking: Flicking;
8 | pagination: Pagination;
9 | wrapper: HTMLElement;
10 | }
11 |
12 | abstract class Renderer {
13 | protected _flicking: Flicking;
14 | protected _pagination: Pagination;
15 | protected _wrapper: HTMLElement;
16 |
17 | public constructor({
18 | flicking,
19 | pagination,
20 | wrapper
21 | }: RendererOptions) {
22 | this._flicking = flicking;
23 | this._pagination = pagination;
24 | this._wrapper = wrapper;
25 | }
26 |
27 | public abstract destroy(): void;
28 | public abstract render(): void;
29 | public abstract update(index: number): void;
30 |
31 | protected _createBulletFromString(html: string, index: number) {
32 | const range = document.createRange();
33 | const frag = range.createContextualFragment(html);
34 | const bullet = frag.firstChild as HTMLElement;
35 |
36 | this._addBulletEvents(bullet, index);
37 |
38 | return bullet;
39 | }
40 |
41 | protected _addBulletEvents(bullet: HTMLElement, index: number) {
42 | const anchorPoints = this._flicking.camera.anchorPoints;
43 | const panelIndex = anchorPoints[index].panel.index;
44 |
45 | bullet.addEventListener(BROWSER.MOUSE_DOWN, e => {
46 | e.stopPropagation();
47 | });
48 |
49 | bullet.addEventListener(BROWSER.TOUCH_START, e => {
50 | e.stopPropagation();
51 | }, { passive: true });
52 |
53 | bullet.addEventListener(BROWSER.CLICK, () => {
54 | this._flicking.moveTo(panelIndex)
55 | .catch(err => {
56 | if (err instanceof FlickingError) return;
57 | throw err;
58 | });
59 | });
60 | }
61 | }
62 |
63 | export default Renderer;
64 |
--------------------------------------------------------------------------------
/src/pagination/renderer/ScrollBulletRenderer.ts:
--------------------------------------------------------------------------------
1 | import { DIRECTION } from "@egjs/flicking";
2 |
3 | import { PAGINATION } from "../../const";
4 | import { addClass, removeClass } from "../../utils";
5 |
6 | import Renderer from "./Renderer";
7 |
8 | class ScrollBulletRenderer extends Renderer {
9 | private _bullets: HTMLElement[] = [];
10 | private _bulletSize: number = 0;
11 | private _previousIndex: number = -1;
12 | private _sliderIndex: number = -1;
13 |
14 | public destroy(): void {
15 | this._bullets = [];
16 | this._bulletSize = 0;
17 | this._previousIndex = -1;
18 | this._sliderIndex = -1;
19 | }
20 |
21 | public render() {
22 | const wrapper = this._wrapper;
23 | const flicking = this._flicking;
24 | const pagination = this._pagination;
25 | const renderBullet = pagination.renderBullet;
26 | const anchorPoints = flicking.camera.anchorPoints;
27 |
28 | const dynamicWrapperClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_WRAPPER_SUFFIX}`;
29 | const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
30 | const sliderClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_SLIDER_SUFFIX}`;
31 | const uninitClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_UNINIT_SUFFIX}`;
32 |
33 | const sliderEl = document.createElement("div");
34 |
35 | addClass(sliderEl, sliderClass);
36 | addClass(wrapper, uninitClass);
37 | addClass(wrapper, dynamicWrapperClass);
38 | wrapper.appendChild(sliderEl);
39 |
40 | sliderEl.innerHTML = anchorPoints
41 | .map((_, index) => renderBullet(bulletClass, index))
42 | .join("\n");
43 |
44 | const bullets = [].slice.call(sliderEl.children) as HTMLElement[];
45 |
46 | bullets.forEach((bullet, index) => {
47 | this._addBulletEvents(bullet, index);
48 | });
49 |
50 | if (bullets.length <= 0) return;
51 |
52 | const bulletStyle = getComputedStyle(bullets[0]);
53 | const bulletSize = bullets[0].clientWidth + parseFloat(bulletStyle.marginLeft) + parseFloat(bulletStyle.marginRight);
54 |
55 | wrapper.style.width = `${bulletSize * pagination.bulletCount}px`;
56 |
57 | this._bullets = bullets;
58 | this._bulletSize = bulletSize;
59 | this._previousIndex = -1;
60 |
61 | this.update(this._flicking.index);
62 |
63 | window.requestAnimationFrame(() => {
64 | removeClass(wrapper, uninitClass);
65 | });
66 | }
67 |
68 | public update(index: number) {
69 | const pagination = this._pagination;
70 | const flicking = this._flicking;
71 | const bullets = this._bullets;
72 | const prevIndex = this._previousIndex;
73 |
74 | const renderBullet = pagination.renderBullet;
75 | const renderActiveBullet = pagination.renderActiveBullet;
76 |
77 | const anchorPoints = flicking.camera.anchorPoints;
78 | const anchorOffset = anchorPoints[0].panel.index;
79 | const activeIndex = index - anchorOffset;
80 |
81 | if (anchorPoints.length <= 0) return;
82 |
83 | const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
84 | const bulletActiveClass = `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
85 | const prevClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_PREV_SUFFIX}`;
86 | const nextClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_NEXT_SUFFIX}`;
87 | const bulletPrevClass = (offset: number) => `${prevClassPrefix}${offset > 1 ? offset : ""}`;
88 | const bulletNextClass = (offset: number) => `${nextClassPrefix}${offset > 1 ? offset : ""}`;
89 |
90 | const prevClassRegex = new RegExp(`^${prevClassPrefix}`);
91 | const nextClassRegex = new RegExp(`^${nextClassPrefix}`);
92 |
93 | if (renderActiveBullet) {
94 | const prevBullet = bullets[prevIndex];
95 | if (prevBullet) {
96 | const newBullet = this._createBulletFromString(
97 | renderBullet(bulletClass, prevIndex),
98 | prevIndex
99 | );
100 | prevBullet.parentElement!.replaceChild(newBullet, prevBullet);
101 | bullets[prevIndex] = newBullet;
102 | }
103 |
104 | const activeBullet = bullets[activeIndex];
105 | if (activeBullet) {
106 | const newActiveBullet = this._createBulletFromString(
107 | renderActiveBullet(bulletClass, activeIndex),
108 | activeIndex
109 | );
110 |
111 | activeBullet.parentElement!.replaceChild(newActiveBullet, activeBullet);
112 | bullets[activeIndex] = newActiveBullet;
113 | }
114 | }
115 |
116 | bullets.forEach((bullet, idx) => {
117 | const indexOffset = idx - activeIndex;
118 | const classList = bullet.className.split(" ");
119 |
120 | for (const className of classList) {
121 | if (className === bulletActiveClass || prevClassRegex.test(className) || nextClassRegex.test(className)) {
122 | removeClass(bullet, className);
123 | }
124 | }
125 |
126 | if (indexOffset === 0) {
127 | addClass(bullet, bulletActiveClass);
128 | } else if (indexOffset > 0) {
129 | addClass(bullet, bulletNextClass(Math.abs(indexOffset)));
130 | } else {
131 | addClass(bullet, bulletPrevClass(Math.abs(indexOffset)));
132 | }
133 | });
134 |
135 | pagination.scrollOnChange(activeIndex, {
136 | total: bullets.length,
137 | prevIndex,
138 | sliderIndex: this._sliderIndex,
139 | direction: activeIndex > prevIndex ? DIRECTION.NEXT : DIRECTION.PREV,
140 | bullets: [...bullets],
141 | moveTo: this.moveTo
142 | });
143 |
144 | this._previousIndex = activeIndex;
145 | }
146 |
147 | public moveTo = (index: number): void => {
148 | const pagination = this._pagination;
149 | const sliderEl = this._wrapper.firstElementChild as HTMLElement;
150 | const bulletSize = this._bulletSize;
151 | const wrapperSize = bulletSize * pagination.bulletCount;
152 |
153 | sliderEl.style.transform = `translate(${wrapperSize / 2 - (index + 0.5) * bulletSize}px)`;
154 | this._sliderIndex = index;
155 | };
156 | }
157 |
158 | export default ScrollBulletRenderer;
159 |
--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
1 | interface ScrollContext {
2 | total: number;
3 | prevIndex: number;
4 | sliderIndex: number;
5 | direction: "NEXT" | "PREV";
6 | bullets: HTMLElement[];
7 | moveTo: (index: number) => void;
8 | }
9 |
10 | export default ScrollContext;
11 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | export const addClass = (el: HTMLElement, className: string) => {
2 | if (!el) return;
3 |
4 | if (el.classList) {
5 | el.classList.add(className);
6 | } else {
7 | const classes = el.className.split(" ");
8 |
9 | if (classes.indexOf(className) < 0) {
10 | el.className = `${el.className} ${className}`;
11 | }
12 | }
13 | };
14 |
15 | export const removeClass = (el: HTMLElement, className: string) => {
16 | if (!el) return;
17 |
18 | if (el.classList) {
19 | el.classList.remove(className);
20 | } else {
21 | const classRegex = new RegExp(`( |^)${className}( |$)`, "g");
22 | el.className.replace(classRegex, " ");
23 | }
24 | };
25 |
26 | export const getElement = (selector: string, parent: HTMLElement, pluginName: string) => {
27 | const el = parent.querySelector(selector);
28 |
29 | if (!el) {
30 | throw new Error(`[Flicking-${pluginName}] Couldn't find element with the given selector: ${selector}`);
31 | }
32 |
33 | return el as HTMLElement;
34 | };
35 |
--------------------------------------------------------------------------------
/test/hammer-simulator.run.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unsafe-call */
2 | /* eslint-disable @typescript-eslint/no-unsafe-member-access */
3 |
4 | Simulator.setType("touch");
5 | Simulator.events.touch.fakeSupport();
6 |
--------------------------------------------------------------------------------
/test/manual/arrow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Arrow
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
Arrow "is-circle"
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
Arrow "is-outside"
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
AutoPlay
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 |
25 |
26 | freeScroll
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
37 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc orci ante, placerat in nunc vel, cursus laoreet turpis. Quisque elementum turpis eget ligula condimentum gravida. Proin vulputate est arcu. Nunc elementum, massa a tempus dignissim, urna elit porttitor odio, in fringilla dolor metus finibus ante. Morbi sagittis finibus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut blandit, neque et scelerisque lacinia, libero ipsum dictum massa, eget cursus arcu turpis quis nunc. Proin rhoncus auctor arcu at bibendum. Aenean urna diam, cursus in lacus non, dignissim finibus purus. Nulla semper massa lorem, a elementum eros tempus et. Curabitur quis elit eget lorem bibendum ultrices sodales sit amet risus. Aenean ipsum justo, varius non pharetra eget, fermentum in sapien.
38 |
39 | Fusce cursus finibus tellus, at consectetur ligula maximus eget. Nunc faucibus sollicitudin odio ut placerat. Sed et rhoncus diam. Curabitur gravida iaculis tempus. Pellentesque gravida malesuada nulla, blandit consectetur metus convallis in. Etiam vel sodales ipsum, vitae maximus nunc. Mauris a mattis quam. Vestibulum vitae est mauris. In interdum quam lectus, varius tempus magna ultricies ut. Mauris nec est justo. Etiam neque magna, euismod sed erat vitae, sollicitudin tincidunt nisl.
40 |
41 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ex orci. Praesent nec porttitor ex. Ut ut leo faucibus, viverra odio in, ultricies nulla. Duis id lectus sapien. Donec eleifend massa nec urna semper, sit amet accumsan elit eleifend. Nullam tempus dui vitae rhoncus semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse vitae erat vitae eros luctus congue vitae at elit. Nam a diam nec turpis consequat sodales. Ut ut semper massa. Aenean a diam eu odio venenatis pellentesque vel non tellus. Nulla augue arcu, placerat et ligula quis, ultrices sodales leo.
42 |
43 | Integer nec libero non justo blandit tincidunt vel id odio. Etiam ornare vel metus vitae ullamcorper. Sed porta lacus eget lectus sodales, non cursus nibh posuere. Suspendisse gravida vestibulum lacus, ac pulvinar purus maximus quis. Aliquam consequat lacinia pellentesque. Curabitur non auctor metus, ut sollicitudin ex. Curabitur elit turpis, porta eget magna in, semper lobortis lacus. Mauris aliquet sapien nec turpis euismod, sit amet consequat purus convallis. Aliquam congue magna vel nulla varius, sit amet condimentum nunc dignissim. Morbi malesuada ante finibus posuere tempor. Proin efficitur quam nec lectus consequat, a euismod ex gravida. Aliquam euismod arcu at nibh venenatis interdum. Donec augue nibh, convallis ac luctus quis, luctus sit amet quam. Phasellus dapibus venenatis dui at consequat. Aenean non venenatis lorem, a imperdiet eros. Ut ac diam id nulla placerat dapibus.
44 |
45 | Ut non hendrerit quam. Ut eu leo at ex ultrices pretium. Sed nec mauris est. Donec vehicula, nunc non fringilla iaculis, augue nisl pulvinar est, efficitur feugiat erat turpis nec tellus. Nullam condimentum dui sed velit dapibus, ut consectetur enim ornare. Nam sagittis nec massa vel faucibus. Donec vestibulum lobortis turpis, non ullamcorper urna sagittis vel. Phasellus porta orci vel arcu congue, ac aliquam ipsum volutpat. Morbi vel nisi ante. Fusce egestas elit sit amet malesuada placerat. Cras euismod, eros tincidunt aliquet posuere, odio nisi lacinia metus, ut consequat tellus enim nec justo. Nunc iaculis luctus dolor maximus semper. Suspendisse ac nulla ut dui feugiat fringilla.
46 |
47 |
48 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/test/manual/css/arrow.css:
--------------------------------------------------------------------------------
1 | .overflow-wrapper {
2 | overflow: visible;
3 | position: relative;
4 | }
5 |
--------------------------------------------------------------------------------
/test/manual/css/common.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 100%;
3 | height: 100%;
4 | }
5 | body {
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | }
10 | .flick-container {
11 | width: 500px;
12 | height: 130px;
13 | margin: 0px auto;
14 | background: #eee;
15 | background: rgba(55, 55, 55 0.1);
16 | border-radius: 5px;
17 | }
18 | .flicking-camera > * {
19 | width: 200px;
20 | height: 200px;
21 | }
22 | #parallax .panel {
23 | width: 500px;
24 | position: relative;
25 | overflow: hidden;
26 | margin-right: 10px;
27 | }
28 | .autoplay .panel:after {
29 | content: "";
30 | position: relative;
31 | display: block;
32 | border-radius: 5px;
33 | width: 200px;
34 | background: #f55;
35 | height: 120px
36 | }
37 | .autoplay .panel.p1:after {
38 | background: #F47071;
39 | }
40 | .autoplay .panel.p2:after {
41 | background: #F69462;
42 | }
43 | .autoplay .panel.p3:after {
44 | background: #EDE484;
45 | }
46 | .autoplay .panel.p4:after {
47 | background: #90F290;
48 | }
49 | .autoplay .panel.p5:after {
50 | background: #78CAFF;
51 | }
52 | .flick-container .panel img {
53 | user-select: none;
54 | -webkit-user-drag: none;
55 | position: absolute;
56 | top: -100%;
57 | bottom: -100%;
58 | left: 50%;
59 | }
60 |
--------------------------------------------------------------------------------
/test/manual/css/pagination.css:
--------------------------------------------------------------------------------
1 | .pagination-bound-bullets,
2 | .pagination-bound-scroll {
3 | font-size: 0;
4 | }
5 |
6 | .pagination-bound-scroll {
7 | left: 50%;
8 | transform: translate(-50%);
9 | white-space: nowrap;
10 | overflow: hidden;
11 | }
12 |
13 | .pagination-bound-scroll .pagination-bound-slider {
14 | transition: .2s transform;
15 | }
16 |
17 | .pagination-bound-bullet {
18 | display: inline-block;
19 | width: 8px;
20 | height: 8px;
21 | margin: 0 4px;
22 | border-radius: 50%;
23 | background-color: rgb(10 10 10 / 10%);
24 | cursor: pointer;
25 | font-size: 1rem;
26 | }
27 |
28 | .pagination-bound-scroll .pagination-bound-bullet {
29 | vertical-align: middle;
30 | position: relative;
31 | transition: .2s transform;
32 | }
33 |
34 | .pagination-bound-bullet-active {
35 | background-color: #f2a65e;
36 | }
37 |
38 | .pagination-bound-scroll .pagination-bound-bullet {
39 | vertical-align: middle;
40 | position: relative;
41 | transition: .2s transform,.2s left;
42 | transform: scale(1);
43 | }
44 |
--------------------------------------------------------------------------------
/test/manual/css/sync.css:
--------------------------------------------------------------------------------
1 | .flicking-camera .card {
2 | height: 120px;
3 | }
4 |
5 | .slide {
6 | width: 100%;
7 | height: 200px;
8 | }
9 |
10 | .slide img {
11 | width: 100%;
12 | }
13 |
14 | .card img {
15 | width: 100%;
16 | height: 100%;
17 | }
18 |
19 | .flicking-thumbnail-active {
20 | border: 4px solid blue;
21 | }
22 |
23 | .sync-wrapper {
24 | font-size: 50px;
25 | color: white;
26 | position: relative;
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | }
31 |
32 | .sync-index {
33 | position: absolute;
34 | }
35 |
--------------------------------------------------------------------------------
/test/manual/img/bg01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naver/egjs-flicking-plugins/87671e2b11a36dfb021bb3af9dc49a40fa390b9e/test/manual/img/bg01.jpg
--------------------------------------------------------------------------------
/test/manual/img/bg02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naver/egjs-flicking-plugins/87671e2b11a36dfb021bb3af9dc49a40fa390b9e/test/manual/img/bg02.jpg
--------------------------------------------------------------------------------
/test/manual/img/bg03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naver/egjs-flicking-plugins/87671e2b11a36dfb021bb3af9dc49a40fa390b9e/test/manual/img/bg03.jpg
--------------------------------------------------------------------------------
/test/manual/js/arrow.js:
--------------------------------------------------------------------------------
1 | const flicking = new Flicking("#arrow", { moveType: "freeScroll" });
2 |
3 | flicking.addPlugins(new Flicking.Plugins.Arrow({
4 | moveByViewportSize: true
5 | }));
6 |
7 | const flicking2 = new Flicking("#arrow2", { circular: true });
8 |
9 | flicking2.addPlugins(new Flicking.Plugins.Arrow({
10 | moveCount: 3
11 | }));
12 |
13 | const flicking3 = new Flicking("#arrow3");
14 |
15 | flicking3.addPlugins(new Flicking.Plugins.Arrow({
16 | parentEl: document.querySelector("#arrow3-wrapper")
17 | }));
18 |
--------------------------------------------------------------------------------
/test/manual/js/autoplay.js:
--------------------------------------------------------------------------------
1 | const flicking = new Flicking("#autoplay", {
2 | circular: true
3 | });
4 |
5 | // AutoPlay
6 | const autoplay = new Flicking.Plugins.AutoPlay({
7 | stopOnHover: true
8 | });
9 | flicking.addPlugins(autoplay)
10 |
11 | document.getElementById("play").addEventListener("click", () => {
12 | autoplay.play();
13 | });
14 |
15 | document.getElementById("stop").addEventListener("click", () => {
16 | autoplay.stop();
17 | });
18 |
19 | const flicking2 = new Flicking("#parallax", {
20 | circular: true
21 | });
22 |
23 | flicking2.addPlugins(new Flicking.Plugins.Parallax("img"));
24 |
25 |
26 | const flicking3 = new Flicking("#autoplay2", {
27 | align: "prev",
28 | moveType: "freeScroll",
29 | circular: true,
30 | easing: x => x
31 | // duration: 5000,
32 | });
33 |
34 | // AutoPlay
35 | const autoplay3 = new Flicking.Plugins.AutoPlay({
36 | direction: "prev",
37 | duration: 0,
38 | animationDuration: 1000
39 | });
40 | flicking3.addPlugins(autoplay3);
41 |
--------------------------------------------------------------------------------
/test/manual/js/pagination.js:
--------------------------------------------------------------------------------
1 | const flicking = new Flicking("#pagination", { bound: true });
2 |
3 | flicking.addPlugins(new Flicking.Plugins.Pagination());
4 |
5 | const flicking1_1 = new Flicking("#pagination2", { bound: true });
6 |
7 | flicking1_1.addPlugins(new Flicking.Plugins.Pagination({
8 | renderBullet: (className, index) => `${index + 1}`,
9 | renderActiveBullet: (className) => ``
10 | }));
11 |
12 | const flicking2 = new Flicking("#pagination-number");
13 |
14 | flicking2.addPlugins(new Flicking.Plugins.Pagination({ type: "fraction" }));
15 |
16 | const flicking3 = new Flicking("#pagination-dynamic");
17 |
18 | flicking3.addPlugins(new Flicking.Plugins.Pagination({
19 | type: "scroll",
20 | renderBullet: (className, index) => `${index + 1}`,
21 | renderActiveBullet: (className) => ``
22 | }));
23 |
24 | const flicking4 = new Flicking("#pagination-dynamic2");
25 |
26 | flicking4.addPlugins(new Flicking.Plugins.Pagination({
27 | type: "scroll",
28 | classPrefix: "pagination-bound",
29 | renderBullet: (className) => ``,
30 | scrollOnChange: (index, ctx) => {
31 | if (ctx.sliderIndex < 0) {
32 | const firstIndex = Math.min(Math.max(index, 2), ctx.total - 2);
33 | ctx.moveTo(firstIndex);
34 | applyBulletSize(firstIndex, ctx);
35 | return;
36 | }
37 |
38 | const offset = Math.abs(index - ctx.sliderIndex);
39 | if (offset < 2) return;
40 |
41 | const newIndex = Math.min(Math.max(index - Math.sign(index - ctx.sliderIndex), 2), ctx.total - 3);
42 | ctx.moveTo(newIndex);
43 |
44 | applyBulletSize(newIndex, ctx);
45 | }
46 | }));
47 |
48 | const applyBulletSize = (newIndex, ctx) => {
49 | const bullets = ctx.bullets;
50 | const visibleBullets = bullets.slice(newIndex - 2, newIndex + 3)
51 | .map((bullet, idx) => ({
52 | index: newIndex - 2 + idx,
53 | bullet
54 | }));
55 |
56 | const middle = visibleBullets.splice(1, 3);
57 |
58 | visibleBullets.forEach(({ index, bullet }) => {
59 | if (index === 0 || index === ctx.total - 1) {
60 | bullet.style.transform = "";
61 | } else {
62 | bullet.style.transform = "scale(0.5)";
63 | }
64 | });
65 |
66 | middle.forEach(({ bullet }) => {
67 | bullet.style.transform = "";
68 | });
69 | };
70 |
71 | document.querySelector("#remove").addEventListener("click", () => {
72 | flicking.remove(0, flicking.panelCount);
73 | });
74 |
75 | document.querySelector("#add").addEventListener("click", () => {
76 | flicking.append(``);
77 | });
78 |
--------------------------------------------------------------------------------
/test/manual/js/perspective.js:
--------------------------------------------------------------------------------
1 | const flicking = new Flicking("#perspective");
2 |
3 | // Perspective
4 | const perspective = new Flicking.Plugins.Perspective();
5 | flicking.addPlugins(perspective)
6 |
7 |
--------------------------------------------------------------------------------
/test/manual/js/sync.js:
--------------------------------------------------------------------------------
1 | const flicking0 = new Flicking("#flick0", {
2 | bound: true
3 | });
4 |
5 | const flicking1 = new Flicking("#flick1", {
6 | bound: true
7 | });
8 |
9 | const flicking2 = new Flicking("#flick2", {
10 | bound: true
11 | });
12 |
13 | flicking0.addPlugins(new Flicking.Plugins.Sync({
14 | type: "camera",
15 | synchronizedFlickingOptions: [
16 | {
17 | flicking: flicking0,
18 | isClickable: true
19 | },
20 | {
21 | flicking: flicking1,
22 | isClickable: true
23 | },
24 | {
25 | flicking: flicking2,
26 | isClickable: true
27 | }
28 | ]
29 | }));
30 |
31 | const flicking3 = new Flicking("#flick3");
32 |
33 | const flicking4 = new Flicking("#flick4", {
34 | bound: true
35 | });
36 |
37 | flicking3.addPlugins(new Flicking.Plugins.Sync({
38 | type: "index",
39 | synchronizedFlickingOptions: [
40 | {
41 | flicking: flicking3,
42 | isSlidable: true
43 | },
44 | {
45 | flicking: flicking4,
46 | isClickable: true,
47 | activeClass: "flicking-thumbnail-active"
48 | }
49 | ]
50 | }));
51 |
--------------------------------------------------------------------------------
/test/manual/pagination.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Pagination
16 |
31 |
32 |
33 | Pagination
34 |
49 | Pagination - Fraction
50 |
60 | Pagination - Scroll
61 |
74 | Pagination - Scroll-Bound
75 |
88 |
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/test/manual/perspective.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Perspective
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
14 |
Sync Between Flickings
15 |
16 |
17 | 🍔 Hamburger
18 | 🍕 Pizza
19 | 🍞 Bread
20 | 🍔 Hamburger
21 | 🍕 Pizza
22 | 🍞 Bread
23 | 🍔 Hamburger
24 | 🍕 Pizza
25 | 🍞 Bread
26 | 🍔 Hamburger
27 | 🍕 Pizza
28 | 🍞 Bread
29 | 🍔 Hamburger
30 | 🍕 Pizza
31 | 🍞 Bread
32 | 🍔 Hamburger
33 | 🍕 Pizza
34 | 🍞 Bread
35 | 🍔 Hamburger
36 | 🍕 Pizza
37 | 🍞 Bread
38 | 🍔 Hamburger
39 | 🍕 Pizza
40 | 🍞 Bread
41 | 🍔 Hamburger
42 | 🍕 Pizza
43 | 🍞 Bread
44 |
45 |
46 |
47 |
48 | 🍎 Apple
49 | 🍉 Watermelon
50 | 🥝 Kiwi
51 | 🍎 Apple
52 | 🍉 Watermelon
53 | 🥝 Kiwi
54 | 🍎 Apple
55 | 🍉 Watermelon
56 | 🥝 Kiwi
57 |
58 |
59 |
60 |
61 | 🥛 Milk
62 | ☕ Coffee
63 | 🍵 Green tea
64 | 🥛 Milk
65 | ☕ Coffee
66 | 🍵 Green tea
67 | 🥛 Milk
68 | ☕ Coffee
69 | 🍵 Green tea
70 | 🥛 Milk
71 | ☕ Coffee
72 | 🍵 Green tea
73 | 🥛 Milk
74 | ☕ Coffee
75 | 🍵 Green tea
76 | 🥛 Milk
77 | ☕ Coffee
78 | 🍵 Green tea
79 |
80 |
81 |
Sync By Index
82 |
83 |
84 |
1
85 |
2
86 |
3
87 |
4
88 |
5
89 |
6
90 |
7
91 |
8
92 |
9
93 |
94 |
95 |
96 |
97 |
1
98 |
2
99 |
3
100 |
4
101 |
5
102 |
6
103 |
7
104 |
8
105 |
9
106 |
107 |
108 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |