1. Advisor
  2. @egjs/flicking
  3. @egjs/flicking code examples
View all @egjs/flicking analysis

How to use @egjs/flicking - 10 common examples

To help you get started, we’ve selected a few @egjs/flicking examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github naver / egjs-flicking / packages / ngx-flicking / projects / ngx-flicking / src / lib / ngx-flicking.component.ts View on Github external
private bindEvents() {
    const events = Object.keys(NativeFlicking.EVENTS)
      .map(key => NativeFlicking.EVENTS[key]);

    events.forEach(eventName => {
      this.flicking.on(eventName, e => {
        e.currentTarget = this;
        const emitter = this[eventName]; // Style guide: Event - https://angular.io/guide/styleguide#dont-prefix-output-properties

        if (emitter) {
          emitter.emit(e);

          if (eventName === 'visibleChange') {
            const list = this.counter(this.panels.length * (this.flicking.getCloneCount() + 1));
            const min = e.range.min;
            const max = e.range.max;

            const visibles = min >= 0
github naver / egjs-flicking / packages / vue-flicking / src / Flicking.ts View on Github external
private $_bindEvents() {
    const events = Object.keys(NativeFlicking.EVENTS)
      .map(key => NativeFlicking.EVENTS[key]);

    events.forEach(eventName => {
      this.$_nativeFlicking.on(eventName, e => {
        e.currentTarget = this;
        // Make events from camelCase to kebab-case
        this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
      });
    });

    if (this.options.renderOnlyVisible) {
      this.$_nativeFlicking.on(NativeFlicking.EVENTS.VISIBLE_CHANGE, e => {
        this.$forceUpdate();
      });
    }
  }
github naver / egjs-flicking / packages / vue-flicking / src / Flicking.ts View on Github external
public mounted() {
    this.$_pluginsDiffer = new ListDiffer();
    this.$_cloneCount = 0;

    const options = {...this.options, ...{ renderExternal: true }};
    this.$_nativeFlicking = new NativeFlicking(
      this.$el as HTMLElement,
      {
        ...options,
        framework: "vue",
        frameworkVersion: Vue.version,
      } as object,
    );

    const slots = this.$_getSlots();
    this.$_slotDiffer = new ListDiffer(slots, vnode => vnode.key!);

    this.$_bindEvents();
    this.$_checkUpdate();

    if (this.options.renderOnlyVisible) {
      // Should update once to update visibles
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
* Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
	 * Constructor
	 * @param {Object} options Option object 옵션 객체
	 */
	constructor(options = {}) {
		this.options = options;
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
	 * Constructor
	 * @param {Object} options Option object 옵션 객체
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
	 * Constructor
	 * @param {Object} options Option object 옵션 객체
	 */
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
github naver / egjs-flicking / src / plugin / Plugin.js View on Github external
/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "@egjs/flicking";

// is to through pass Flicking's utils & constants to plugins
const utils = Flicking.utils;
const consts = utils.extend(utils.extend({}, Flicking.consts), {
	DIRECTION_NONE: Flicking.DIRECTION_NONE,
	DIRECTION_LEFT: Flicking.DIRECTION_LEFT,
	DIRECTION_RIGHT: Flicking.DIRECTION_RIGHT,
	DIRECTION_UP: Flicking.DIRECTION_UP,
	DIRECTION_DOWN: Flicking.DIRECTION_DOWN,
	DIRECTION_HORIZONTAL: Flicking.DIRECTION_HORIZONTAL,
	DIRECTION_VERTICAL: Flicking.DIRECTION_VERTICAL,
	DIRECTION_ALL: Flicking.DIRECTION_ALL
});

/**
 * Base class to generate flicking plugin
 * Lifecycle: componentWillMount --> componentMount --> componentDidMount --> componentWillUnmount
 * @ko Flicking 플러그인을 생성하기 위한 기본 클래스
 * @alias eg.Flicking.plugin
 * @private
 */
export default class Plugin {
	/**
	 * Constructor

@egjs/flicking

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

GitHub
MIT
Latest version published 28 days ago

Package Health Score

89 / 100
Full package analysis

Popular @egjs/flicking functions

Similar packages