Use the Methods

You can see Conveyer's methods.

JavaScript

You can call methods directly from the Conveyer instance.

const conveyer = new Conveyer("#el", options);

conveyer.scrollIntoView("end", { align: "start "});

React

You can call methods of Conveyer by getting a result of useConveyer.

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

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

  return <div className="container">
    <div className="buttons">
      <button className="prev" onClick={() => {
        // start to end
        scrollIntoView("start", {
          align: "end",
          duration: 500,
        });
      }}>Prev</button>
      <button className="next" onClick={() => {
        // end to start
        scrollIntoView("end", {
          align: "start",
          duration: 500,
        });
      }}>Next</button>
    </div>
    <div className="items" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
    </div>
  </div>;
};

See React Refs and the DOM for more info.

Vue@3

You can call methods of Conveyer by getting a result of useConveyer.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

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

export default {
  setup() {
    const { ref, scrollIntoView } = useConveyer({
      horizontal: false,
    });

    return {
      ref,
      scrollIntoView,
    };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    },
  },
};

Vue@2

You can call methods of Conveyer by getting a result of useConveyer.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

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

export default {
  setup() {
    const { ref, scrollIntoView } = useConveyer({
      horizontal: false,
    });

    return {
      ref,
      scrollIntoView,
    };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    },
  },
};

Angular

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with Conveyer.

app.component.html

<div class="container">
  <button id="prev" (click)="prev()">prev</button>
  <button id="next" (click)="next()">next</button>
  <div
    class="items"
    ngxConveyer
    #conveyer="ngxConveyer"
    >
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
    <div class="item"><a href="#4">4</a></div>
    <div class="item"><a href="#5">5</a></div>
    <div class="item"><a href="#6">6</a></div>
    <div class="item"><a href="#7">7</a></div>
    <div class="item"><a href="#8">8</a></div>
    <div class="item"><a href="#9">9</a></div>
    <div class="item"><a href="#10">10</a></div>
    <div class="item"><a href="#11">11</a></div>
    <div class="item"><a href="#12">12</a></div>
  </div>
</div>

app.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';

import { NgxConveyerDirective } from 'ngx-conveyer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
  prev() {
    this.conveyer.scrollIntoView("start", {
      align: "end",
      duration: 500,
    });
  }
  next() {
    this.conveyer.scrollIntoView("end", {
      align: "start",
      duration: 500,
    });
  }
}

Svelte

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

  const { ref, scrollIntoView } = useConveyer();
</script>
<div class="container">
  <div class="buttons">
    <button class="prev" on:click={() => {
      // start to end
      scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    }}>Prev</button>
    <button class="next" on:click={() => {
      // end to start
      scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    }}>Next</button>
  </div>
  <div class="items" use:ref>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

See all available methods at our API page.