Quick Start

Native Scroll is the most basic and best scrolling function that a browser can support.
Conveyer adds Drag gestures to your Native Scroll.

JavaScript

Add the script/CSS to the page.

<!-- https://naver.github.io/egjs-conveyer/release/latest/dist/conveyer.min.js -->
<script src="https://unpkg.com/conveyer/dist/conveyer.min.js" crossorigin="anonymous"></script>

Or, you can rather import them if you're using a bundler like webpack or rollup.

import Conveyer from "@egjs/conveyer";

Then, add some basic HTML layout of Conveyer to your page.

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Then initialize Conveyer instance with JavaScript after.

import Conveyer from "@egjs/react-conveyer";

const ig = new Conveyer(".items");

React

You can import & use Conveyer as a React Component.

SomeComponent.jsx

import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default () => {
  const ref = useRef();
  useConveyer(ref);

  return <div className="items" ref={ref}>
    <div className="item">1</div>
    <div className="item">2</div>
    <div className="item">3</div>
  </div>;
}

Vue@3

You can import & use Conveyer as a Vue Component.

<template>

<div class="items" ref="ref">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<script>

import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
    const { ref } = useConveyer();

    return {
      ref,
    };
  },
};

Vue@2

@vue/composition-api is required to use vue2-conveyer.

import Vue from "vue";
import VueCompositionAPI from "@vue/composition-api";

Vue.use(VueCompositionAPI);

You can import & use Conveyer as a Vue Component.

<template>

<div class="items" ref="ref">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<script>

import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
    const { ref } = useConveyer();

    return {
      ref,
    };
  },
};

Angular

You can add NgxConveyerModule at imports of your app module to use Conveyer.

app.module.ts

import { NgxConveyerModule } from '@egjs/ngx-conveyer';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxConveyerModule /* Add in imports */
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } /* Your app */

app.component.html

<div class="items" [ngxConveyer]="{ horizontal: true }" #conveyer="ngxConveyer">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Svelte

You can import Conveyer from the "svelte-conveyer" package.

App.svelte

<script lang="ts">
  import { useConveyer } from "@egjs/svelte-conveyer";

  const { ref } = useConveyer();
</script>
<div class="items" use:ref>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>